bitshift/templates/index.html

= extends "layout.html"

= block title
  Home
= endblock

= block head
  {{ assets.tag("jqueryui.custom.min.css") }}
  {{ assets.tag("jquery.min.js") }}
  {{ assets.tag("jquery-ui.min.js") }}
  {{ assets.tag("typeahead.bundle.min.js") }}

  {{ assets.tag("index.css") }}
= endblock

= block body
  <div id="search-field" class="partly-visible">
    <div id="title">
      <span id="title-bit">bit</span
      ><span id="title-angle">&laquo;</span
      ><span id="title-shift">shift</span>
    </div>

    <form id="search-bar">
      <input type="text" name="query">
      <div id="advanced-search">
        <!-- Tags are closed on the following line to remove whitespace between divs. -->
        <div id="col1">
          + Add group <!-- Placeholder.  -->
        </div><div id="col2">
          <div id="upper-half">
            <div id="col1">
              <ul>
                <li>
                  <label for="languages">Languages</label>
                  <input class="typeahead" type="text" name="languages" id="languages"><br>
                </li>

                <li>
                  <label for="authors">Authors</label>
                  <input type="text" name="authors" id="authors"><br>
                </li>
              </ul>
            </div><div id="col2">
              <ul>
                <li>
                  <label for="date-last-modified">Date last modified</label>
                  <input type="text" name="date-last-modified" id="date-last-modified">
                </li>

                <li>
                  <label for="date-created">Date created</label>
                  <input type="text" name="date-created" id="date-created">
                </li>
              </ul>
            </div>
          </div>

          <div id="lower-half">
            <ul>
              <li>
                <label for="symbols">Symbols</label>
                <input type="text" name="symbols" id="symbols"><br>
              </li>

              <li>
                <label for="functions">Functions</label>
                <input type="text" name="functions" id="functions"><br>
              </li>

              <li>
                <label for="classes">Classes</label>
                <input type="text" name="classes" id="classes"><br>
              </li>

              <li>
                <label for="variables">Variables</label>
                <input type="text" name="variables" id="variables"><br>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </form>
  </div>

  <div id="results"></div>

  {{ assets.tag("index.js") }}
  <script>
    TYPEAHEAD_LANGUAGES = {{ typeahead_languages | safe }};
    $(function() {
      $("#date-last-modified").datepicker();
      $("#date-created").datepicker();
    });

    var languages = new Bloodhound({
      datumTokenizer: Bloodhound.tokenizers.obj.whitespace("value"),
      queryTokenizer: Bloodhound.tokenizers.whitespace,
      local: $.map(TYPEAHEAD_LANGUAGES, function(state){
        return {value : state};
      })
    });

    languages.initialize();
    $(".typeahead").typeahead({
        hint: true,
        highlight: true,
        minLength: 1
      },
      {
        name: "languages",
        displayKey: 'value',
        source: languages.ttAdapter()
      });
  </script>
= endblock