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

{% comment %}Opis, adres kanoniczny, Open Graph i dane strukturalne sklada
   szkielet dokumentu z obiektu `seo` podanego przez widok (core/seo.py).
   Tutaj zostaje sam kanal wpisow - nalezy do bloga, nie do znacznikow
   strony.{% endcomment %}
{% block meta %}
  {% if blog.rss_enabled %}<link rel="alternate" type="application/rss+xml" title="{{ blog.title }}" href="{% url 'blog:rss' %}">{% endif %}
{% endblock %}

{% comment %}Wpis czyta sie jak zwykly artykul: kategoria,
   tytul, wiersz z data i autorem, zdjecie i tresc - wszystko w jednej
   kolumnie. Nie ma kolorowej szyny przyklejonej do lewej krawedzi ani spisu
   tresci obok, bo wpis jest zwykle krotszy od podstrony i nie ma po czym
   skakac.{% endcomment %}
{% block content %}

{% include 'public/partials/preview_bar.html' %}

<header class="mx-auto w-full {{ post.content_width_class }} px-6 pb-10 pt-12 sm:pt-16">
  <p class="text-sm font-semibold text-brand-600 dark:text-brand-400">
    {% if post.category %}
      <a href="{{ post.category.get_absolute_url }}" class="hover:underline hover:underline-offset-4">{{ post.category.name }}</a>
    {% else %}
      <a href="{% url 'blog:list' %}" class="hover:underline hover:underline-offset-4">{{ blog.title }}</a>
    {% endif %}
  </p>

  <h1 class="mt-4 text-4xl font-bold tracking-tight sm:text-5xl">{{ post.title }}</h1>

  {% if post.excerpt %}
    <p class="mt-6 text-lg leading-relaxed text-site-muted dark:text-site-muted-dark">{{ post.excerpt }}</p>
  {% endif %}

  {% comment %}Jeden wiersz z tym, co czytelnik chce wiedziec przed lektura.
     Kazda z trzech pozycji ma wlasny wylacznik w panelu (Blog > Ustawienia),
     wiec wiersz moze zniknac w calosci.{% endcomment %}
  <p class="mt-6 flex flex-wrap gap-x-5 gap-y-1 text-sm text-site-muted dark:text-site-muted-dark">
    {% if blog.show_date and post.published_at %}<span>{{ post.published_at|date:site_settings.date_format|default:post.published_at }}</span>{% endif %}
    {% if blog.show_author and post.author %}<span>{{ post.author.get_full_name|default:post.author.username }}</span>{% endif %}
    {% if blog.show_reading_time %}<span>{{ post.reading_time }} min czytania</span>{% endif %}
  </p>
</header>

{% if post.cover %}
  <div class="mx-auto w-full max-w-4xl px-6 pb-12">
    {% picture post.cover alt=post.title css="h-[15rem] w-full object-cover sm:h-[24rem]" sizes="(min-width: 1024px) 60vw, 100vw" loading="eager" fetchpriority="high" %}
  </div>
{% endif %}

{% comment %}Bloki tresci doczepione do tego wpisu w panelu (modul `blocks`).{% endcomment %}
{% content_blocks post 'before' %}

{% comment %}Szerokość kolumny ustawia sam wpis (Treść > Szerokość treści).{% endcomment %}
<article class="{% if post.content_is_full %}w-full pb-16 sm:pb-20{% else %}mx-auto w-full {{ post.content_width_class }} px-6 pb-16 sm:pb-20{% endif %}">
  <div id="page-body" class="prose prose-site max-w-none dark:prose-invert prose-headings:scroll-mt-28 prose-h2:mt-14 prose-h2:text-2xl">
    {{ post.body_html }}
  </div>
  {% content_blocks post 'after' %}
</article>

{% comment %}Pytania i odpowiedzi doczepione do tego wpisu (modul `faq`).{% endcomment %}
{% faq_sections post %}

{% if related %}
<section class="border-t border-site-border dark:border-site-border-dark" aria-labelledby="zobacz-takze">
  <div class="mx-auto w-full max-w-6xl px-6 py-16">
    <h2 id="zobacz-takze" class="text-2xl font-bold tracking-tight">{% trans "Zobacz także" %}</h2>

    <div class="mt-8 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
      {% for item in related %}
        <a href="{{ item.get_absolute_url }}" class="group block">
          <p class="text-lg font-semibold leading-snug tracking-tight group-hover:text-brand-600 dark:group-hover:text-brand-400">{{ item.title }}</p>
          {% if blog.show_date and item.published_at %}
            <p class="mt-2 text-sm text-site-muted dark:text-site-muted-dark">{{ item.published_at|date:site_settings.date_format|default:item.published_at }}</p>
          {% endif %}
        </a>
      {% endfor %}
    </div>
  </div>
</section>
{% endif %}

{% if comments.visible %}
<section id="komentarze" class="border-t border-site-border dark:border-site-border-dark">
  <div class="mx-auto w-full max-w-3xl px-6 py-16">
    <h2 class="text-2xl font-bold tracking-tight">Komentarze{% if comment_list %} <span class="font-normal text-site-muted dark:text-site-muted-dark">({{ comment_list|length }})</span>{% endif %}</h2>

    <div class="mt-8 divide-y divide-site-border border-y border-site-border dark:divide-site-border-dark dark:border-site-border-dark">
      {% for comment in comment_list %}
        <article id="komentarz-{{ comment.pk }}" class="py-6">
          <p class="flex flex-wrap items-baseline gap-x-4 text-sm">
            <span class="font-semibold">{{ comment.display_name }}</span>
            <span class="text-site-muted dark:text-site-muted-dark">{{ comment.created_at|date:site_settings.date_format|default:comment.created_at }}</span>
          </p>
          <div class="prose prose-sm prose-site mt-3 max-w-none dark:prose-invert">{{ comment.body_html }}</div>
        </article>
      {% empty %}
        <p class="py-8 text-sm text-site-muted dark:text-site-muted-dark">{% trans "Nie ma jeszcze komentarzy - napisz pierwszy." %}</p>
      {% endfor %}
    </div>

    {% if comment_form %}
      <form method="post" novalidate class="mt-12 space-y-5 border border-site-border p-7 sm:p-8 dark:border-site-border-dark">
        {% csrf_token %}
        <p class="text-lg font-semibold tracking-tight">{% trans "Dodaj komentarz" %}</p>
        {% if comment_form.non_field_errors %}
          <div class="border-l-4 border-l-red-600 bg-red-50 px-4 py-3 text-sm text-red-800 dark:bg-red-950 dark:text-red-200">
            {% for error in comment_form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
          </div>
        {% endif %}
        {% for field in comment_form %}
          {% if field.is_hidden %}
            {{ field }}
          {% else %}
            <div>
              <label class="block text-sm font-medium" for="{{ field.id_for_label }}">
                {{ field.label }}{% if field.field.required %} <span class="text-red-600" aria-hidden="true">*</span>{% endif %}
              </label>
              <div class="mt-2">{{ field }}</div>
              {% if field.help_text %}<p class="mt-1 text-xs text-site-muted dark:text-site-muted-dark">{{ field.help_text }}</p>{% endif %}
              {% for error in field.errors %}<p class="error-text">{{ error }}</p>{% endfor %}
            </div>
          {% endif %}
        {% endfor %}
        <button class="btn-primary" type="submit">{% trans "Dodaj komentarz" %}</button>
      </form>
    {% elif comments_login_required %}
      <p class="mt-10 text-sm text-site-muted dark:text-site-muted-dark">
        {% url 'panel:login' as adres_logowania %}
        {% blocktrans with adres=adres_logowania powrot=request.path|urlencode %}Komentowac moga tylko osoby zalogowane -
        <a class="font-semibold text-brand-600 hover:underline hover:underline-offset-4 dark:text-brand-400" href="{{ adres }}?next={{ powrot }}">zaloguj się</a>.{% endblocktrans %}
      </p>
    {% elif comments.closed_reason %}
      <p class="mt-10 text-sm text-site-muted dark:text-site-muted-dark">{{ comments.closed_reason }}</p>
    {% endif %}
  </div>
</section>
{% endif %}

{% endblock %}