{% extends "base.html" %}
{% block content %}
  <!-- Home -->
  <div data-role="page" data-theme="b" id="page1">
      <div data-role="content">
          <h1>{% trans %}Internet-in-a-Box{% endtrans %}</h1>

          {% if error is not none %}
              <div class="error">{{ error }}</div>
          {% endif %}

          <!--
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="searchinput1">
                  </label>
                  <input name="" id="searchinput1" placeholder="Under Construction" value="" type="search">
              </fieldset>
          </div>
          -->
          <ul data-role="listview" data-divider-theme="b" data-inset="true">
              <li data-theme="c">
              <a href="{{ url_for('wikipedia_views.wikipedia_view') }}" data-transition="slide">
                      {% trans %}Wikipedia{% endtrans %}
                      <!-- span class="ui-li-count">
                          123
                      </span -->
                  </a>
              </li>
              <li data-theme="c">
                  <a href="{{ url_for('gutenberg.index') }}" data-transition="slide" data-ajax="false">
                      {% trans %}Books{% endtrans %}
                      <!-- span class="ui-li-count">
                          13
                      </span -->
                  </a>
              </li>
              <li data-theme="c">
              <a href="{{ url_for('static', filename='map.html') }}" data-transition="slide" data-ajax="false">
                      {% trans %}Maps{% endtrans %}
                      <!-- span class="ui-li-count">
                          3
                      </span -->
                  </a>
              </li>
              <li data-theme="c">
              <a href="{{ url_for('video_views.khan_view') }}" data-transition="slide">
                      {% trans %}Video{% endtrans %}
                  </a>
              </li>
              <li data-theme="c">
                  <a href="#page7" data-transition="slide">
                      {% trans %}Software{% endtrans %}
                  </a>
              </li>
              <li data-theme="d">
              <a href="{{ url_for('settings.settings_view') }}" data-transition="slide">
                      {% trans %}Settings{% endtrans %}
                  </a>
              </li>
          </ul>
      </div>
      <!--
      <div data-theme="c" data-role="footer" data-position="fixed">
          <div>
              <p>
                  <b>
                      Hello world how are you today?&nbsp; This is a chat message.
                      <span data-mce-bogus="1" id="_mce_caret">
                          <span data-mce-bogus="1" style="color: rgb(0, 0, 255);">
                              ​ -Braddock
                          </span>
                      </span>
                      <br>
                  </b>
              </p>
          </div>
      </div>
      -->
  </div>
  <!-- Software -->
  <div data-role="page" id="page7">
      <div data-theme="a" data-role="header">
          <a data-role="button" data-direction="reverse" data-rel="back" data-transition="slide"
          href="#page1" class="ui-btn-left">
              {% trans %}Back{% endtrans %}
          </a>
          <h3>
              {% trans %}Software{% endtrans %}
          </h3>
      </div>
      <div data-role="content">
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="searchinput7">
                  </label>
                  <input name="" id="searchinput7" placeholder="{% trans %}Search{% endtrans %}" value="" type="search">
              </fieldset>
          </div>
          <a data-role="button" data-theme="b" href="#page7">
              {% trans %}Download Linux{% endtrans %}
          </a>

          <a data-role="button" data-theme="b" href="/iiab/software/pool" data-ajax="false">
              {% trans %}Browse Open Source Software{% endtrans %}
          </a>
      </div>
  </div>
  <!-- Chat -->
  <div data-role="page" id="page8">
      <div data-role="content">
      </div>
  </div>
  <!-- Search-based Home -->
  <div data-role="page" id="page9">
      <div data-theme="a" data-role="header">
          <h3>
              Heritage
          </h3>
      </div>
      <div data-role="content">
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup" data-type="horizontal">
                  <legend>
                  </legend>
                  <input id="radio12" name="" value="radio1" type="radio">
                  <label for="radio12">
                      Wikipedia
                  </label>
                  <input id="radio13" name="" value="radio14" type="radio">
                  <label for="radio13">
                      Maps
                  </label>
                  <input id="radio14" name="" value="radio15" type="radio">
                  <label for="radio14">
                      Books
                  </label>
                  <input id="radio18" name="" value="radio18" type="radio">
                  <label for="radio18">
                      Video
                  </label>
                  <input id="radio19" name="" value="radio19" type="radio">
                  <label for="radio19">
                      Software
                  </label>
                  <input id="radio20" name="" value="radio20" type="radio">
                  <label for="radio20">
                      Chat
                  </label>
              </fieldset>
          </div>
          <div data-role="fieldcontain">
              <fieldset data-role="controlgroup">
                  <label for="searchinput8">
                  </label>
                  <input name="" id="searchinput8" placeholder="kansas" value="" type="search">
              </fieldset>
          </div>
          <div data-role="collapsible-set">
              <div data-role="collapsible">
                  <h3>
                      Wizard of Oz
                  </h3>
              </div>
              <div data-role="collapsible">
                  <h3>
                      Kansas City, KA
                  </h3>
              </div>
              <div data-role="collapsible">
                  <h3>
                      Tornado
                  </h3>
              </div>
          </div>
      </div>
  </div>
{% endblock %}