{% comment %}Wyszukiwarka panelu w nagłówku każdej strony.

Sam formularz działa bez javascriptu - prowadzi na stronę wyników
(panel:search). Skrypt w panel/base.html dokłada do niego podpowiedzi
pobierane z panel:search_suggest.{% endcomment %}
<form action="{% url 'panel:search' %}" method="get" role="search" autocomplete="off"
      class="panel-search relative w-full sm:w-72" data-suggest="{% url 'panel:search_suggest' %}">
  <label class="sr-only" for="panel-search-input">Szukaj ustawień w panelu</label>
  <div class="relative">
    <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-slate-400" aria-hidden="true">
      <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
      </svg>
    </span>
    <input type="search" name="q" id="panel-search-input" value="{{ query|default:'' }}"
           placeholder="Szukaj ustawień..." aria-label="Szukaj ustawień w panelu"
           role="combobox" aria-expanded="false" aria-controls="panel-search-results"
           class="input py-2 pl-9 pr-14">
    <kbd class="pointer-events-none absolute inset-y-0 right-0 my-auto mr-2 hidden h-5 items-center border border-slate-300 px-1.5 text-[10px] font-semibold text-slate-400 sm:flex dark:border-slate-700">Ctrl K</kbd>
  </div>

  <div id="panel-search-results" role="listbox" aria-label="Podpowiedzi wyszukiwarki"
       class="absolute left-0 right-0 top-full z-50 hidden max-h-96 overflow-y-auto border border-slate-200 bg-white shadow-xl dark:border-slate-700 dark:bg-slate-900"></div>
</form>