{% load static vantage i18n %}
{% comment %}
  The header search box and the ⌘K palette, in that order and on purpose.

  The form is the real thing: it is a plain GET to the results page and it works with
  no JavaScript at all. The palette is an enhancement layered over it — the script
  turns the input into a trigger, and if the script never runs the input stays a
  search box that submits.
{% endcomment %}
<link rel="stylesheet" href="{% static 'vantage/vantage-palette.css' %}">

<form class="v-search v-palette-trigger" role="search" method="get"
      action="{% url 'vantage:search' %}">
  {% icon "search" %}
  <input class="v-input" type="search" name="q" id="v-palette-trigger"
         placeholder="{% translate 'Search…' %}" aria-label="{% translate 'Search records and commands' %}"
         aria-keyshortcuts="Meta+K Control+K" autocomplete="off">
  <kbd class="v-palette-kbd" data-palette-hint aria-hidden="true">⌘K</kbd>
  <noscript>
    <button class="v-btn v-btn-secondary v-btn-sm" type="submit">{% translate "Search" context "button, the verb" %}</button>
  </noscript>
</form>

{% if settings.COMMAND_PALETTE %}
  <dialog class="v-palette" id="v-palette" aria-label="{% translate 'Search and commands' %}"
          data-search-url="{% url 'vantage:search-json' %}"
          data-commands-url="{% url 'vantage:commands' %}"
          data-results-url="{% url 'vantage:search' %}">
    <div class="v-palette-panel">
      <div class="v-palette-head">
        {% icon "search" %}
        <input class="v-palette-input" id="v-palette-input" type="text"
               role="combobox" aria-expanded="false" aria-controls="v-palette-list"
               aria-autocomplete="list" autocomplete="off" autocorrect="off"
               spellcheck="false"
               placeholder="{% translate 'Search records, or jump to a page…' %}"
               aria-label="{% translate 'Search records, or jump to a page' %}">
        <button type="button" class="v-palette-dismiss" data-palette-close>Esc</button>
      </div>

      {% comment %}
        Group headings live in a role="group" so the listbox only ever contains
        options — a heading rendered as a bare option is announced as choosable.
      {% endcomment %}
      <ul class="v-palette-list" id="v-palette-list" role="listbox"
          aria-label="{% translate 'Search results and commands' %}"></ul>

      <p class="v-palette-empty" data-palette-empty hidden>{% translate "Nothing matched." %}</p>

      <footer class="v-palette-foot">
        <span>{% blocktranslate %}<kbd>↑</kbd><kbd>↓</kbd> move{% endblocktranslate %}</span>
        <span>{% blocktranslate %}<kbd>↵</kbd> open{% endblocktranslate %}</span>
        <span>{% blocktranslate %}<kbd>Esc</kbd> close{% endblocktranslate %}</span>
        <span class="v-palette-busy" data-palette-busy hidden>{% translate "Searching…" %}</span>
      </footer>

      <div class="v-sr-only" role="status" aria-live="polite" data-palette-status></div>
    </div>
  </dialog>

  <script src="{% static 'vantage/vantage-palette.js' %}" defer></script>
{% endif %}