{% load i18n %}
{% load static %}

<nav id="search-bar" class="level">
  <div class="level-item" id="logo">
    <figure class="image is-64x64">
      <a href="{% url "bds:home" %}">
        <img src="{% static "bds/images/logo_square.svg" %}" alt="bds-logo">
      </a>
    </figure>
  </div>

  <div class="level-item" id="logout-mobile">
    <figure class="image is-64x64">
      <a href="{% url 'authens:logout' %}">
        <img src="{% static "bds/images/logout.svg" %}" alt="logout">
      </a>
    </figure>
  </div>

  <div class="level-item" id="search-input">
    <input
      class="input"
      type="text"
      name="q"
      id="search_autocomplete"
      spellcheck="false"
      placeholder="{% trans "Chercher une personne" %}" />
    <div class="yourlabs-autocomplete"></div>
  </div>

  <div class="level-item" id="logout">
    <figure class="image is-64x64">
      <a href="{% url 'authens:logout' %}">
        <img src="{% static "bds/images/logout.svg" %}" alt="logout">
      </a>
    </figure>
  </div>
</nav>

<script type="text/javascript">
  $(document).ready(function() {
    $('input#search_autocomplete').yourlabsAutocomplete({
      url: '{% url 'bds:autocomplete' %}',
      minimumCharacters: 3,
      id: 'search_autocomplete',
      choiceSelector: 'li:has(a)',
      box: $(".yourlabs-autocomplete"),
    });
    $('input#search_autocomplete').bind(
      'selectChoice',
      function(e, choice, autocomplete) {
        window.location = choice.find('a:first').attr('href');
      }
    );
  });
</script>
