{% comment %}Dodatkowy pasek nawigacji - ten sam szablon rysuje pasek nad
   nagłówkiem i pasek na dole strony (Ustawienia > Nawigacja serwisu).
   Włącznik, wygląd, rozmieszczenie i szerokości ekranów są w ustawieniach,
   a pozycje to pozycje menu z wybranym miejscem.

   Pasek jest jednopoziomowy: same odnośniki, bez rozwijania - rozwijane
   zakładki ma menu główne.

   Sam włącznik nie wystarczy: pasek bez tekstu, bez danych kontaktowych
   i bez pozycji nie ma czego pokazać, więc w ogóle się nie rysuje - inaczej
   nad logo zostawalby pusty pasek na dwa piksele. Panel mówi o tym przy
   liście pozycji.

   Parametry include:
     items, text, style_class, align_class, visibility_class, edge, extra_class
   (`edge` mówi, po której stronie paska stoi kreska: 'top' albo 'bottom').{% endcomment %}
{% if items or text or contact_phone or contact_email %}
<div class="{{ visibility_class }} {{ style_class }} {{ extra_class }} {% if edge == 'top' %}border-t{% else %}border-b{% endif %} border-black/10 dark:border-white/10">
  <div class="wrap flex flex-wrap items-center gap-x-6 gap-y-1 py-2 text-xs {{ align_class }}">
    {% if text or contact_phone or contact_email %}
      <p class="flex flex-wrap items-center gap-x-4 gap-y-1">
        {% if text %}<span>{{ text }}</span>{% endif %}
        {% if contact_phone %}<a class="font-semibold hover:underline" href="tel:{{ contact_phone|cut:' ' }}">{{ contact_phone }}</a>{% endif %}
        {% if contact_email %}<a class="font-semibold hover:underline" href="mailto:{{ contact_email }}">{{ contact_email }}</a>{% endif %}
      </p>
    {% endif %}

    {% if items %}
      <nav class="flex flex-wrap items-center gap-x-5 gap-y-1">
        {% for item in items %}
          <a href="{{ item.url }}"{% if item.new_tab %} target="_blank" rel="noopener"{% endif %}
             class="py-1 font-semibold uppercase tracking-[0.08em] hover:underline">{{ item.title }}</a>
        {% endfor %}
      </nav>
    {% endif %}
  </div>
</div>
{% endif %}