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

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'blog/css/article.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>

     {% if user_is_authenticated %}
        <form method="post">
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit" class="btn btn-primary">Отправить</button>
        </form>
    {% else %}
        <p class="alert alert-info">
            Только авторизованные пользователи могут оставлять комментарии.
            <a href="{% url 'login' %}?next={{ request.path|urlencode }}">Войдите</a> или
            <a href="{% url 'register' %}?next={{ request.path|urlencode }}">зарегистрируйтесь</a>
        </p>
    {% endif %}
</div>

<!-- Скрипт для модального окна -->
<script src="{% static 'programmer/js/recall.js' %}"></script>

<!-- Модальное окно для увеличения изображений -->
<div id="imageModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modalTitle">Просмотр изображения</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <img class="modal-image" id="modalImage" alt="">
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Находим все изображения внутри .content-card (основной контент статьи)
        document.querySelectorAll('.content-card img').forEach(function(img) {
            // Игнорируем, если изображение уже обёрнуто в ссылку
            if (img.closest('a')) return;

            // Меняем курсор, чтобы показать, что изображение кликабельно
            img.style.cursor = 'pointer';
            img.addEventListener('click', function() {
                // Вызываем глобальную функцию openModal из recall.js
                openModal(this.src, this.alt || 'Изображение из статьи');
            });
        });
    });
</script>
{% endblock %}
