{% load i18n %}
{% comment %}Kafelki i tresc redakcyjna strony glownej, styl klasyczny
   (Tresc > Strona glowna). Kafelek jest zwyklym polem w ramce z wloskowata
   krawedzia: ikona, tytul, zdanie i odnosnik. Bez cieni, bez zalewania
   kolorem po najechaniu - zmienia sie tylko kolor krawedzi i tytulu.{% 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-10 {% endif %}grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
      {% for block in blocks %}
        {% if block.url %}<a href="{{ block.url }}" class="group flex flex-col border border-site-border p-7 hover:border-brand-600 dark:border-site-border-dark dark:hover:border-brand-400">{% else %}<article class="flex flex-col border border-site-border p-7 dark:border-site-border-dark">{% endif %}
          {% if block.icon %}
            <span class="mb-5 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="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 w-full max-w-3xl px-6">
    <div class="prose prose-site max-w-none text-lg dark:prose-invert">{{ page.body|linebreaks }}</div>
  </div>
</section>
{% endif %}