{% extends "public/base.html" %}
{% load media %}
{% load i18n %}

{% comment %}Opis, adres kanoniczny i Open Graph sklada szkielet dokumentu
   z obiektu `seo` podanego przez widok (core/seo.py) - tutaj zostaje samo
   wskazanie kanalu RSS, ktorego szkielet nie zna.{% endcomment %}
{% block meta %}{% if blog.rss_enabled %}
  <link rel="alternate" type="application/rss+xml" title="{{ blog.title }}" href="{% url 'blog:rss' %}">{% endif %}{% endblock %}

{% comment %}Lista wpisow: tytul dzialu, opis, filtr
   kategorii i wpisy jeden pod drugim. Bez wielkiego licznika wpisow obok
   tytulu i bez siatki kafelkow zalewanych kolorem - wpis jest tu wierszem
   z miniatura, tytulem i zajawka, wiec od razu widac, o czym jest.{% endcomment %}
{% block content %}

<header class="mx-auto w-full max-w-4xl px-6 pb-12 pt-12 sm:pt-16">
  {% if category %}
    <p class="text-sm font-semibold text-brand-600 dark:text-brand-400">
      <a href="{% url 'blog:list' %}" class="hover:underline hover:underline-offset-4">{{ blog.title }}</a>
    </p>
  {% endif %}
  <h1 class="{% if category %}mt-3 {% endif %}text-4xl font-bold tracking-tight sm:text-5xl">{{ category.name|default:blog.title }}</h1>
  {% if category.description or blog.description %}
    <p class="mt-6 max-w-2xl text-lg leading-relaxed text-site-muted dark:text-site-muted-dark">{{ category.description|default:blog.description }}</p>
  {% endif %}

  {% comment %}Kategorie wpisow - co sie tu pokaze, ustawia panel
     (Blog > Ustawienia).{% endcomment %}
  {% if categories %}
    <nav class="mt-8 flex flex-wrap gap-x-5 gap-y-2 text-sm font-medium" aria-label="{% trans "Kategorie wpisów" %}">
      <a href="{% url 'blog:list' %}"
         class="border-b-2 pb-1 {% if not category %}border-b-brand-600 text-brand-600 dark:border-b-brand-400 dark:text-brand-400{% else %}border-b-transparent text-site-muted hover:border-b-site-border hover:text-site-text dark:text-site-muted-dark dark:hover:border-b-site-border-dark dark:hover:text-site-text-dark{% endif %}">{% trans "Wszystkie" %}</a>
      {% for item in categories %}
        <a href="{{ item.get_absolute_url }}"
           class="border-b-2 pb-1 {% if category.pk == item.pk %}border-b-brand-600 text-brand-600 dark:border-b-brand-400 dark:text-brand-400{% else %}border-b-transparent text-site-muted hover:border-b-site-border hover:text-site-text dark:text-site-muted-dark dark:hover:border-b-site-border-dark dark:hover:text-site-text-dark{% endif %}">{{ item.name }}</a>
      {% endfor %}
    </nav>
  {% endif %}
</header>

<section class="mx-auto w-full max-w-4xl px-6 pb-16 sm:pb-20">
  {% if page_obj %}
  <div class="divide-y divide-site-border border-t border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
    {% for post in page_obj %}
      <article class="py-10">
        {% comment %}Kolumne na miniature otwiera dopiero wpis, ktory ja ma -
           inaczej wpisy bez zdjecia zaczynalyby sie od pustego, wcietego
           pola i tytul odjezdzalby od krawedzi bez powodu.{% endcomment %}
        <a href="{{ post.get_absolute_url }}" class="group block{% if post.cover %} gap-6 sm:grid sm:grid-cols-[12rem_minmax(0,1fr)]{% endif %}">
          {% if post.cover %}
            <span class="mb-6 block aspect-video overflow-hidden bg-black sm:mb-0 sm:aspect-[4/3]">
              {% picture post.cover alt=post.title css="h-full w-full object-cover" sizes="(min-width: 640px) 12rem, 100vw" %}
            </span>
          {% endif %}

          <span class="block">
            <span class="flex flex-wrap gap-x-4 gap-y-1 text-sm text-site-muted dark:text-site-muted-dark">
              {% if post.category %}<span class="font-semibold text-brand-600 dark:text-brand-400">{{ post.category.name }}</span>{% endif %}
              {% if blog.show_date and post.published_at %}<span>{{ post.published_at|date:site_settings.date_format|default:post.published_at }}</span>{% endif %}
            </span>
            <span class="mt-2 block text-2xl font-bold leading-snug tracking-tight group-hover:text-brand-600 dark:group-hover:text-brand-400">{{ post.title }}</span>
            <span class="mt-3 block leading-relaxed text-site-muted dark:text-site-muted-dark">
              {% if post.excerpt %}{{ post.excerpt|truncatechars:blog.excerpt_length }}{% else %}{{ post.content|striptags|truncatechars:blog.excerpt_length }}{% endif %}
            </span>
          </span>
        </a>
      </article>
    {% endfor %}
  </div>
  {% else %}
    <p class="border border-dashed border-site-border p-14 text-center text-sm text-site-muted dark:border-site-border-dark dark:text-site-muted-dark">
      {% trans "Nie ma jeszcze żadnych opublikowanych wpisów." %}
    </p>
  {% endif %}

  {% if page_obj.has_other_pages %}
  <nav class="mt-10 flex items-center justify-between border-t border-site-border pt-6 text-sm dark:border-site-border-dark">
    {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}" class="font-medium hover:text-brand-600 dark:hover:text-brand-400">&larr; {% trans "Poprzednia" %}</a>
    {% else %}<span></span>{% endif %}
    <span class="text-site-muted dark:text-site-muted-dark">{% blocktrans with numer=page_obj.number ile=page_obj.paginator.num_pages %}Strona {{ numer }} z {{ ile }}{% endblocktrans %}</span>
    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}" class="font-medium hover:text-brand-600 dark:hover:text-brand-400">{% trans "Następna" %} &rarr;</a>
    {% else %}<span></span>{% endif %}
  </nav>
  {% endif %}
</section>
{% endblock %}