{% extends 'programmer/base.html' %}
{% load static %}
{% load blog_extras %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'programmer/css/recall.css' %}">
{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">Блог программиста 1С</h1>
    <p class="page-subtitle">Полезные статьи и заметки</p>
</div>

<div class="categories">
    {% for cat in categories %}
        <a href="{% url 'blog:category_detail' cat.slug %}" class="btn btn-outline">
            {{ cat.name }}
        </a>
    {% endfor %}
</div>

<div class="grid grid-2">
    {% for article in articles %}
    <div class="modern-card">
        <h2><a href="{{ article.get_absolute_url }}">{{ article.title }}</a></h2>
        <p>{{ article.content|clean_html|truncatewords:30 }}</p>
        <div class="meta">
            <span>📅 {{ article.time_create|date:"d.m.Y" }}</span>
            <span>👁 {{ article.views_count }}</span>
        </div>
    </div>
    {% empty %}
    <p>Статей пока нет.</p>
    {% endfor %}
</div>

{% if page_obj.has_other_pages %}
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; Первая</a>
            <a href="?page={{ page_obj.previous_page_number }}">Предыдущая</a>
        {% endif %}

        <span class="current">
            Страница {{ page_obj.number }} из {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">Следующая</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">Последняя &raquo;</a>
        {% endif %}
    </span>
</div>
{% endif %}
{% endblock %}