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

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

{% block content %}
<div class="page-header">
    <h1 class="page-title">{{ article.title }}</h1>
    <p class="page-subtitle">
        Категория: <a href="{% url 'blog:category_detail' article.category.slug %}">{{ article.category.name }}</a> |
        {{ article.time_create|date:"d.m.Y" }} |
        Просмотров: {{ article.views_count }}
    </p>
</div>

<div class="content-card">
    {% if article.image %}
        <img src="{{ article.image.url }}" alt="{{ article.title }}" style="max-width: 100%; margin-bottom: 1rem;">
    {% endif %}
    <div class="card-content">
        {{ article.content|safe }}
    </div>
</div>

<!-- Комментарии -->
<h3>Комментарии</h3>
{% for comment in moderated_comments %}
    <div class="modern-card" style="margin-bottom: 1rem;">
        <p><strong>{{ comment.author_name }}</strong> ({{ comment.time_create|date:"d.m.Y H:i" }})</p>
        <p>{{ comment.content|linebreaks }}</p>
        {% if not comment.is_moderated %}
            <p><em>Комментарий ожидает модерации</em></p>
        {% endif %}
    </div>
{% empty %}
    <p>Пока нет комментариев. Будьте первым!</p>
{% endfor %}

<!-- Форма добавления комментария -->
<div class="modern-card">
    <h4>Добавить комментарий</h4>
    <form method="post">
        {% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="btn btn-primary">Отправить</button>
    </form>
</div>
{% endblock %}