{% comment %}Komunikaty jednego miejsca na stronie.

Szablon publiczny włącza ten partial trzy razy - raz dla każdego miejsca
(`{% include ... with items=notices.top %}`). Zamknięcie paska pamięta
przeglądarka (localStorage), więc strona nie potrzebuje ciasteczka ani
zapytania do serwera; czas pamiętania przychodzi z ustawień modułu.
{% endcomment %}

{% if items %}
  <div class="notices" data-notice-days="{{ notices.settings.dismiss_days }}">
    {% for notice in items %}
      <div class="notice border-b px-4 py-3 text-sm {{ notice.style_classes }}"
           data-notice="{{ notice.pk }}-{{ notice.updated_at|date:'U' }}">
        <div class="mx-auto flex w-full max-w-7xl flex-wrap items-center gap-x-4 gap-y-2">
          <div class="min-w-0 flex-1">
            {% if notice.title %}<p class="font-semibold">{{ notice.title }}</p>{% endif %}
            <div class="prose-notice [&_a]:underline">{{ notice.body_html|safe }}</div>
          </div>

          {% if notice.link_url %}
            <a href="{{ notice.link_url }}"
               class="shrink-0 border-2 border-current px-4 py-1.5 text-sm font-semibold uppercase tracking-wide hover:opacity-100 hover:shadow-lg">
              {{ notice.link_label }}
            </a>
          {% endif %}

          {% if notice.is_dismissible %}
            <button type="button" data-notice-close aria-label="Zamknij komunikat"
                    class="shrink-0 cursor-pointer p-1 opacity-70 hover:opacity-100">
              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                   stroke-width="2" stroke-linecap="round" aria-hidden="true">
                <path d="M6 6l12 12M18 6L6 18"/>
              </svg>
            </button>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}