{% comment %}Pozycja "Kategorie" w poziomym pasku. Sposób rozwijania bierze się
   z Ustawień > Nawigacja serwisu: lista pozioma pokazuje kategorie wprost,
   kolumny i mega menu chowają je w panelu pod pozycją.

   Zakładki wyglądają tak samo jak pozycje menu (nav_item.html) - grafitowy pasek,
   najechanie maluje prostokąt kolorem wiodącym.{% endcomment %}

{% if site_settings.nav_categories_display == 'list' %}
  {% for category in nav.categories %}
    <a href="{{ category.url }}" class="flex items-center px-4 py-3.5 hover:bg-brand-600">{{ category.title }}</a>
  {% endfor %}
{% else %}
  <div class="nav-drop">
    {% comment %}Zakładka "Kategorie" nie prowadzi nigdzie sama, więc jest w
       całości przyciskiem rozwijającym - działa i mysza (najechanie), i
       stuknieciem palca. Reguły `.nav-drop*` stoją w templates/base.html.{% endcomment %}
    <button type="button" aria-expanded="false"
            class="nav-drop-trigger nav-drop-toggle flex h-full items-center gap-1.5 px-4 py-3.5">
      Kategorie
      <span aria-hidden="true" class="nav-drop-caret">&#9662;</span>
    </button>

    {% if site_settings.nav_categories_display == 'mega' %}
      <div class="nav-drop-panel left-1/2 max-w-5xl -translate-x-1/2">
        <div class="w-screen max-w-5xl border-t-2 border-t-brand-600 bg-site-surface p-8 text-site-text shadow-2xl shadow-black/30
                    dark:bg-site-surface-dark dark:text-site-text-dark dark:shadow-black/60">
          <div class="grid gap-6"
               style="grid-template-columns: repeat({{ site_settings.nav_mega_columns|default:4 }}, minmax(0, 1fr));">
            {% for category in nav.categories %}
              <div class="group/cat">
                {% if site_settings.nav_mega_thumbnails and category.image %}
                  <a href="{{ category.url }}" class="mb-3 block overflow-hidden">
                    <img src="{{ category.image }}" alt="{{ category.title }}"
                         class="h-24 w-full object-cover group-hover/cat:scale-105">
                  </a>
                {% endif %}
                <a href="{{ category.url }}" class="block border-l-2 border-l-brand-600 pl-3 text-sm font-bold normal-case tracking-normal hover:text-brand-600">{{ category.title }}</a>
                {% if category.description %}
                  <p class="mt-2 pl-3 text-xs font-normal normal-case tracking-normal text-site-muted dark:text-site-muted-dark">{{ category.description|truncatechars:90 }}</p>
                {% endif %}
              </div>
            {% endfor %}
          </div>

          {% if site_settings.nav_mega_featured and featured_products %}
            <div class="mt-8 border-t border-site-border pt-5 dark:border-site-border-dark">
              <p class="eyebrow">Wyr&oacute;&#380;nione</p>
              <div class="mt-4 grid gap-4"
                   style="grid-template-columns: repeat({{ site_settings.nav_mega_columns|default:4 }}, minmax(0, 1fr));">
                {% for product in featured_products %}
                  <a href="{{ product.url }}" class="text-sm font-normal normal-case tracking-normal hover:text-brand-600">{{ product.title }}</a>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    {% else %}
      <div class="nav-drop-panel left-0">
        <div class="grid w-96 max-w-[calc(100vw-2rem)] grid-cols-2 border-t-2 border-t-brand-600 bg-site-surface p-2 text-site-text shadow-2xl shadow-black/30
                    dark:bg-site-surface-dark dark:text-site-text-dark dark:shadow-black/60">
          {% for category in nav.categories %}
            <a href="{{ category.url }}" class="px-3 py-2 text-sm font-normal normal-case tracking-normal  
                      hover:bg-brand-600 hover:text-white">{{ category.title }}</a>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
{% endif %}