{% comment %}Gorny pasek - wyglad wlasny projektu.

   O ukladzie paska, przyklejeniu i wyszukiwarce decyduje panel (Ustawienia >
   Nawigacja serwisu). Sam pasek jest jasny i plaski: bez grubej kreski
   w kolorze wiodacym nad nim i bez grafitowego paska menu pod nim. Oddziela
   go od tresci sama wloskowata linia - kolor wiodacy zostaje na odnosniki
   i przyciski, zeby bylo go widac tam, gdzie cos robi.{% endcomment %}
<header class="{% if site_settings.header_sticky %}sticky top-0 z-40{% else %}relative{% endif %} border-b border-site-border bg-site-header/95 text-site-header-text backdrop-blur
               dark:border-site-border-dark dark:bg-site-header-dark/95 dark:text-site-header-text-dark">
  <div class="mx-auto w-full max-w-6xl px-6">
    <div class="py-5">

      {% if site_settings.header_layout == 'centered-logo' %}
        <div class="flex flex-col items-center gap-4">
          {% include 'public/partials/header_logo.html' %}
          <div class="flex w-full items-center justify-center gap-4">
            {% if site_settings.nav_layout == 'drawer' %}{% include 'public/partials/nav_drawer.html' %}{% endif %}
            {% include 'public/partials/nav_mobile.html' %}
            {% if site_settings.header_search_enabled and site_settings.search_enabled %}{% include 'public/partials/header_search.html' %}{% endif %}
            {% include 'public/partials/header_icons.html' %}
          </div>
        </div>

      {% elif site_settings.header_layout == 'logo-icons' %}
        <div class="flex items-center justify-between gap-6">
          <div class="flex items-center gap-3">
            {% if site_settings.nav_layout == 'drawer' %}{% include 'public/partials/nav_drawer.html' %}{% endif %}
            {% include 'public/partials/nav_mobile.html' %}
            {% include 'public/partials/header_logo.html' %}
          </div>
          {% include 'public/partials/header_icons.html' %}
        </div>
        {% if site_settings.header_search_enabled and site_settings.search_enabled %}
          <div class="mt-4 flex">{% include 'public/partials/header_search.html' %}</div>
        {% endif %}

      {% elif site_settings.header_layout == 'search-logo-icons' %}
        {% comment %}Na telefonie wyszukiwarka nie miesci sie w jednym rzedzie
           z logo i ikonami - schodzi wiec pod spod, a od `sm` wraca na swoje
           miejsce z lewej strony paska.{% endcomment %}
        <div class="flex flex-wrap items-center justify-between gap-3 sm:flex-nowrap sm:gap-6">
          {% if site_settings.header_search_enabled and site_settings.search_enabled %}
            <div class="order-last flex w-full min-w-0 sm:order-none sm:w-auto sm:flex-1">
              {% include 'public/partials/header_search.html' %}
            </div>
          {% endif %}
          <div class="flex shrink-0 items-center gap-3">
            {% if site_settings.nav_layout == 'drawer' %}{% include 'public/partials/nav_drawer.html' %}{% endif %}
            {% include 'public/partials/nav_mobile.html' %}
            {% include 'public/partials/header_logo.html' %}
          </div>
          {% include 'public/partials/header_icons.html' %}
        </div>

      {% else %}
        {% comment %}Uklad domyslny: logo z lewej, menu obok niego, wyszukiwarka
           i ikony z prawej - wszystko w jednym rzedzie, bo jasny pasek nie
           potrzebuje drugiego pietra.

           Na telefonie ten rzad sie nie miesci: wyszukiwarka wchodzilaby
           w nazwe serwisu i ucinala ja w polowie. `order-last w-full` zsuwa
           ja wtedy pod logo i ikony (w kodzie stoi przed nimi, wiec przy
           chodzeniu tabulatorem kolejnosc zostaje naturalna), a od `sm`
           wraca na swoje miejsce w rzedzie.{% endcomment %}
        <div class="flex flex-wrap items-center justify-between gap-x-6 gap-y-3">
          <div class="flex items-center gap-3">
            {% if site_settings.nav_layout == 'drawer' %}{% include 'public/partials/nav_drawer.html' %}{% endif %}
            {% include 'public/partials/nav_mobile.html' %}
            {% include 'public/partials/header_logo.html' %}
          </div>
          {% if site_settings.nav_layout == 'top-bar' and nav.items %}
            <div class="hidden min-w-0 flex-1 lg:block">{% include 'public/partials/nav_bar.html' %}</div>
          {% endif %}
          {% if site_settings.header_search_enabled and site_settings.search_enabled %}
            <div class="order-last flex w-full min-w-0 sm:order-none sm:w-56 lg:w-64">
              {% include 'public/partials/header_search.html' %}
            </div>
          {% endif %}
          {% include 'public/partials/header_icons.html' %}
        </div>
      {% endif %}
    </div>
  </div>

  {% comment %}Uklad domyslny wciagnal menu do rzedu z logo, ale dopiero od `lg`.
     Tu stoi drugie wyjscie: wlasny rzad pod paskiem, oddzielony wloskowata
     linia - biora go pozostale uklady paska, bo w nich menu nie miesci sie
     w rzedzie z logo w zadnej szerokosci.

     Oba wyjscia zaczynaja sie od `lg`. Nizej zadne nie ma sensu: zakladki
     lamia sie wtedy na kilka rzedow, wiec na telefonie menu chowa sie pod
     przyciskiem (nav_mobile.html).{% endcomment %}
  {% if site_settings.nav_layout == 'top-bar' and nav.items and site_settings.header_layout != 'logo-search-icons' %}
    <div class="hidden border-t border-site-border lg:block dark:border-site-border-dark">
      <div class="mx-auto w-full max-w-6xl px-6">
        {% include 'public/partials/nav_bar.html' %}
      </div>
    </div>
  {% endif %}
</header>