{% extends "_base.html" %}{% load static %}

{% block PAGE_TITLE %}Инструкции — LPON.RU{% endblock %}
{% block DESCRIPTION %}Информационные и текстовые материалы, правила, условия и справка LPON.RU{% endblock %}

{% block CONTENT %}
{# Подключение блока хлебных крошек #}
{% include "block/breadcrumbs.html" %}

<div class="py-6">
  {# Заголовок страницы #}
  <h1 class="text-3xl font-bold mb-6 text-slate-900 dark:text-slate-100 font-serif px-4">
    Инструкции
  </h1>

  {# Список статей #}
  {% if articles %}
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      {% for article in articles %}
        <article class="flex flex-col bg-slate-50 dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-xl p-5 hover:shadow-md transition-shadow">
          {# Изображение обложки, если есть #}
          {% if article.k_article_to_image %}
            <div class="mb-4 overflow-hidden rounded-lg max-h-48 flex items-center justify-center bg-slate-200 dark:bg-slate-800">
              <img
                src="{{ article.k_article_to_image.url }}"
                alt="{{ article.k_article_to_image.default_alt_text|default:article.s_article_title }}"
                class="w-full h-auto object-cover"
              />
            </div>
          {% endif %}

          {# Заголовок статьи со ссылкой #}
          <h2 class="text-xl font-semibold mb-2 text-slate-900 dark:text-slate-100 font-serif">
            <a href="/info/{{ article.slug }}/" class="text-slate-900 dark:text-slate-100 hover:text-blue-500">
              {% if article.s_article_title_html %}
                {{ article.s_article_title_html|safe }}
              {% else %}
                {{ article.s_article_title }}
              {% endif %}
            </a>
          </h2>

          {# Тизер / анонс статьи #}
          {% if article.s_article_teaser_html %}
            <div class="text-slate-600 dark:text-slate-400 mb-4 grow leading-relaxed font-serif">
              {{ article.s_article_teaser_html|safe }}
            </div>
          {% endif %}

          {# Подвал карточки с датой и кнопкой перехода #}
          <div class="mt-auto pt-4 border-t border-slate-200/60 dark:border-slate-800 flex items-center justify-between text-sm text-slate-500 dark:text-slate-400 font-serif">
            <span>{{ article.t_article_created|date:"Y.m.d" }}</span>
            <a href="/info/{{ article.slug }}/" class="font-medium">
              Читать полностью &rarr;
            </a>
          </div>
        </article>
      {% endfor %}
    </div>
  {% else %}
    {# Сообщение, если опубликованных статей типа TXT пока нет #}
    <div class="p-8 text-center bg-slate-50 dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800">
      <p class="text-slate-600 dark:text-slate-400">
        Пока нет опубликованных текстовых материалов.
      </p>
    </div>
  {% endif %}
</div>
{% endblock CONTENT %}