{% load i18n %}
{% comment %}Kafelki i tresc redakcyjna strony glownej, styl nowoczesny.
   Kafelki nie maja wlasnych ramek - dzieli je sama siatka na wloskowatych
   krawedziach, a najechanie podnosi tytul kolorem wiodacym. Tresc redaktora
   stoi pod nimi z haslem serwisu w kolumnie z boku, tak samo jak sekcje
   wlasne w tym stylu.{% endcomment %}

{% if blocks %}
<section class="border-t border-site-border py-16 sm:py-20 dark:border-site-border-dark">
  <div class="mx-auto w-full max-w-6xl px-6">
    {% if page.blocks_title %}
      <h2 class="max-w-3xl text-3xl font-bold tracking-tight sm:text-4xl">{{ page.blocks_title }}</h2>
    {% endif %}

    <div class="{% if page.blocks_title %}mt-12 {% endif %}grid gap-px border border-site-border bg-site-border sm:grid-cols-2 lg:grid-cols-3 dark:border-site-border-dark dark:bg-site-border-dark">
      {% for block in blocks %}
        {% if block.url %}<a href="{{ block.url }}" class="group flex flex-col bg-site-bg p-8 dark:bg-site-bg-dark">{% else %}<article class="flex flex-col bg-site-bg p-8 dark:bg-site-bg-dark">{% endif %}
          <span class="text-sm font-semibold text-brand-600 dark:text-brand-400">{{ forloop.counter|stringformat:"02d" }}</span>
          {% if block.icon %}
            <span class="mt-6 inline-flex h-10 w-10 items-center justify-center text-brand-600 dark:text-brand-400">{% include 'partials/icon.html' with icon=block.icon %}</span>
          {% endif %}
          <h3 class="mt-5 text-lg font-semibold leading-snug tracking-tight group-hover:text-brand-600 dark:group-hover:text-brand-400">{{ block.title }}</h3>
          {% if block.text %}
            <p class="mt-3 flex-1 leading-relaxed text-site-muted dark:text-site-muted-dark">{{ block.text }}</p>
          {% endif %}
          {% if block.url %}
            <span class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-brand-600 dark:text-brand-400">
              {% trans "Czytaj więcej" as czytaj %}{{ block.link_label|default:czytaj }}
              <span aria-hidden="true">&rarr;</span>
            </span>
          {% endif %}
        {% if block.url %}</a>{% else %}</article>{% endif %}
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% if page.body %}
<section class="border-t border-site-border py-16 sm:py-20 dark:border-site-border-dark">
  <div class="mx-auto grid w-full max-w-6xl gap-8 px-6 lg:grid-cols-[minmax(0,14rem)_minmax(0,1fr)] lg:gap-16">
    <div class="lg:sticky lg:top-28 lg:self-start">
      {% comment %}Haslo serwisu (Ustawienia > Dane serwisu) - bez niego kolumna
         z boku zostaje pusta i tresc idzie sama.{% endcomment %}
      {% if site_settings.tagline %}<p class="text-xl font-semibold leading-snug tracking-tight">{{ site_settings.tagline }}</p>{% endif %}
    </div>
    <div class="prose prose-site min-w-0 max-w-2xl text-lg dark:prose-invert">{{ page.body|linebreaks }}</div>
  </div>
</section>
{% endif %}