{% extends 'base.html' %}
{% load static %}

{% block title %}{{ topic.title }} | Форум{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6 max-w-4xl">
    <div class="mb-4">
        <a href="{% url 'forum_list' %}" class="text-[#4395AB] hover:text-[#2d6b7c]">← Назад к списку</a>
    </div>

    <!-- Тема -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
        <div class="border-l-4 border-[#4395AB]">
            <div class="p-6">
                <div class="flex justify-between items-start mb-4">
                    <div>
                        <h1 class="text-2xl font-bold text-gray-800">{{ topic.title }}</h1>
                        <div class="flex gap-3 mt-1 text-sm text-gray-500">
                            <span><i class="fas fa-user mr-1"></i>{{ topic.author.email }}</span>
                            <span><i class="fas fa-calendar-alt mr-1"></i>{{ topic.created_at|date:"d.m.Y H:i" }}</span>
                        </div>
                    </div>
                    <div class="flex gap-2">
                        {% if user.is_staff or user.role == 'teacher' %}
                            <a href="{% url 'pin_topic' topic.id %}" class="text-yellow-600 hover:text-yellow-800 text-sm">
                                <i class="fas fa-thumbtack mr-1"></i>{{ topic.is_pinned|yesno:"Открепить,Закрепить" }}
                            </a>
                            <a href="{% url 'close_topic' topic.id %}" class="text-red-600 hover:text-red-800 text-sm">
                                <i class="fas fa-lock mr-1"></i>{{ topic.is_closed|yesno:"Открыть,Закрыть" }}
                            </a>
                        {% endif %}
                        {% if topic.author == user or user.is_staff %}
                            <a href="{% url 'topic_edit' topic.id %}" class="text-blue-600 hover:text-blue-800">
                                <i class="fas fa-edit"></i>
                            </a>
                            <a href="{% url 'topic_delete' topic.id %}" class="text-red-600 hover:text-red-800">
                                <i class="fas fa-trash"></i>
                            </a>
                        {% endif %}
                    </div>
                </div>
                <div class="prose max-w-none">
                    {{ topic.content|linebreaks }}
                </div>
            </div>
        </div>
    </div>

    <!-- Комментарии -->
    <h2 class="font-semibold text-gray-800 mb-4">Ответы ({{ comments.count }})</h2>
    
    <div class="space-y-4">
        {% for comment in comments %}
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-5">
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <span class="font-semibold text-gray-800">{{ comment.author.email }}</span>
                        <span class="text-xs text-gray-400 ml-2">{{ comment.created_at|date:"d.m.Y H:i" }}</span>
                    </div>
                    {% if comment.author == user or user.is_staff %}
                    <div class="flex gap-2">
                        <a href="{% url 'comment_edit' comment.id %}" class="text-blue-600 hover:text-blue-800 text-sm">
                            <i class="fas fa-edit"></i>
                        </a>
                        <a href="{% url 'comment_delete' comment.id %}" class="text-red-600 hover:text-red-800 text-sm">
                            <i class="fas fa-trash"></i>
                        </a>
                    </div>
                    {% endif %}
                </div>
                <div class="text-gray-700">
                    {{ comment.content|linebreaks }}
                </div>
            </div>
        </div>
        {% empty %}
        <div class="bg-white rounded-xl shadow-sm p-6 text-center text-gray-500">
            <i class="fas fa-comment-dots text-3xl mb-2 block"></i>
            <p>Нет комментариев. Будьте первым!</p>
        </div>
        {% endfor %}
    </div>

    <!-- Форма добавления комментария -->
    {% if not topic.is_closed %}
    <div class="bg-white rounded-xl shadow-sm p-6 mt-6">
        <h3 class="font-semibold text-gray-800 mb-4">Добавить ответ</h3>
        <form method="post">
            {% csrf_token %}
            <textarea name="content" rows="5" class="w-full border rounded-lg p-3 focus:outline-none focus:border-[#4395AB]" placeholder="Напишите ваш ответ..."></textarea>
            <button type="submit" class="mt-3 bg-[#4395AB] text-white px-4 py-2 rounded-lg hover:bg-[#2d6b7c] transition">
                Отправить
            </button>
        </form>
    </div>
    {% else %}
    <div class="bg-gray-100 rounded-xl p-4 text-center text-gray-500 mt-6">
        <i class="fas fa-lock mr-2"></i>Тема закрыта для комментариев
    </div>
    {% endif %}
</div>
{% endblock %}