{% from "macros.jinja2" import
	get_conceptscheme_label
  %}
{% set app_package = app_package|default('atramhasis', true) %}

<div class="sticky">
  <nav class="top-bar" data-topbar role="navigation">
    <ul class="title-area">
      <li class="name">
        <a href="/"><img src="{{ request.static_path(app_package + ':static/img/atramlogo.png') }}" class="left logo-small">
          <h1 class="left logo-small-text">Atramhasis</h1>
        </a>
      </li>
      <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
      <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>
    <form onsubmit="return validateForm()" id="search-form" method="get" action="#" name="searchForm" class="top-bar-section">
      <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li>
          <select id="scheme">
            <option value="" selected>{% trans %}select_scheme{% endtrans %}</option>
            {% for item in conceptschemes %}
              <option {% if item.id == scheme_id %} selected="selected" {% endif %} value="{{ request.route_path('search_result', scheme_id=item.id) }}">
                {{ get_conceptscheme_label(item.conceptscheme, request.locale_name) }}
              </option>
            {% endfor %}
          </select>
        </li>
        <li class="divider"></li>
        <li>
          <select id="ctype" name="ctype">
            <option value="all">{% trans %}select_type{% endtrans %}</option>
            <option {% if ctype == 'all' %} selected="selected" {% endif %} value="all">{% trans %}type_all{% endtrans %}</option>
            <option {% if ctype == 'concept' %} selected="selected" {% endif %} value="concept">{% trans %}type_concept{% endtrans %}</option>
            <option {% if ctype == 'collection' %} selected="selected" {% endif %} value="collection">{% trans %}type_collection{% endtrans %}</option>
          </select>
        </li>
        <li class="divider"></li>
        <li class="has-form">
          <div class="row collapse">
            <div class="left">
              <input {% if label is not none %} value="{{label}}" {% endif %}
                name="label"
                id="label"
                type="text"
                class="search-input-top"
                placeholder="{% trans %}search_for{% endtrans %} {% trans %}labels{% endtrans %}"/>
              </div>
            <div class="left"><button type="submit"><span class="ico ico-mglass"></span></button></div>
          </div>
        </li>
      </ul>
    </form>
    <script>
      function validateForm() {
        var scheme = $('#scheme');
        var schemeVal = scheme.val();
        if (schemeVal && schemeVal !== '') {
          return true;
        }
        scheme.addClass('highlightError');
        scheme.one('change', function () {
          scheme.removeClass('highlightError');
        });
        return false;
      }
    </script>
  </nav>
</div>

