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

{% block extra_css %}
    <link id="theme-css-1c" rel="stylesheet" href="{% static 'programmer/css/1c-light.min.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>
<div id="comments-section">
    {% show_comments comments=root_comments %}
</div>

<!-- Форма добавления комментария -->
<div class="modern-card" id="comment-form">
    <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>

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

<script src="{% static 'programmer/js/recall.js' %}"></script>

{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Клик по изображениям в контенте
        document.querySelectorAll('.content-card img').forEach(function(img) {
            if (img.closest('a')) return;
            img.style.cursor = 'pointer';
            img.addEventListener('click', function() {
                ImageModal.open(this.src, this.alt || 'Изображение из статьи');
            });
        });

        // Обработка кнопок "Ответить" (делегирование)
        document.getElementById('comments-section').addEventListener('click', function(e) {
            const btn = e.target.closest('.reply-btn');
            if (!btn) return;
            e.preventDefault();

            const parentId = btn.dataset.commentId;
            const author = btn.dataset.author;

            // Находим текст комментария
            const commentItem = btn.closest('.comment-item');
            const contentDiv = commentItem.querySelector('.comment-content');
            let quotedText = contentDiv.textContent.trim();

            // Формируем цитату
            const quote = `> @${author}: ${quotedText}\n\n`;
            const textarea = document.getElementById('id_content');
            textarea.value = quote;

            // Устанавливаем parent_id
            document.getElementById('id_parent_id').value = parentId;

            // Фокус на поле ввода и прокрутка к форме
            textarea.focus();
            document.getElementById('comment-form').scrollIntoView({ behavior: 'smooth' });
        });
    });
</script>
{% endblock %}