{% extends 'public/base.html' %}
{% load i18n %}

{% block content %}

{% include 'public/partials/page_header.html' with title=title eyebrow=site_settings.site_name lead=intro %}

<section class="band">
  <div class="wrap">
    {% comment %}Sekcje mapy stoją obok siebie na szerokim ekranie, a jedna pod
       drugą ną wąskim. Każdy odnośnik to osobny wiersz oddzielony włosowa
       linia - tak samo jak wyniki wyszukiwania.{% endcomment %}
    <div class="grid grid-cols-1 gap-x-10 gap-y-12 sm:grid-cols-2 lg:grid-cols-3">
      {% for section in sections %}
        <div>
          <h2 class="eyebrow">{{ section.title }}</h2>
          <ul class="mt-4 divide-y divide-site-border border-t border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
            {% for link in section.links %}
              <li>
                <a href="{{ link.url }}"
                   class="tile-hover block px-3 py-3 text-sm font-medium hover:text-brand-600 dark:hover:text-brand-400">
                  {{ link.title }}
                </a>
              </li>
            {% endfor %}
          </ul>
        </div>
      {% empty %}
        <p class="text-sm text-site-muted dark:text-site-muted-dark">
          {% trans "Serwis nie ma jeszcze żadnych podstron." %}
        </p>
      {% endfor %}
    </div>
  </div>
</section>
{% endblock %}