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

{% block title %}Форум{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-6">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Форум</h1>
            <p class="text-gray-500">Обсуждение учебных вопросов</p>
        </div>
        <a href="{% url 'forum_create' %}" class="bg-[#4395AB] text-white px-4 py-2 rounded-lg hover:bg-[#2d6b7c] transition">
            <i class="fas fa-plus mr-2"></i>Новая тема
        </a>
    </div>

    <!-- Поиск -->
    <div class="bg-white rounded-xl shadow-sm p-4 mb-6">
        <form method="get" class="flex gap-4">
            <input type="text" name="q" value="{{ query|default:'' }}" 
                   placeholder="Поиск по темам..." 
                   class="flex-1 px-4 py-2 border rounded-lg focus:outline-none focus:border-[#4395AB]">
            <button type="submit" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600">
                <i class="fas fa-search"></i>
            </button>
        </form>
    </div>

    <!-- Список тем -->
    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
        <table class="w-full">
            <thead class="bg-gray-100">
                <tr class="border-b">
                    <th class="px-6 py-3 text-left">Тема</th>
                    <th class="px-6 py-3 text-left">Автор</th>
                    <th class="px-6 py-3 text-left">Ответы</th>
                    <th class="px-6 py-3 text-left">Последнее обновление</th>
                </tr>
            </thead>
            <tbody>
                {% for topic in topics %}
                <tr class="border-b hover:bg-gray-50">
                    <td class="px-6 py-4">
                        {% if topic.is_pinned %}
                            <span class="bg-yellow-100 text-yellow-700 text-xs px-2 py-1 rounded mr-2">Закреплено</span>
                        {% endif %}
                        {% if topic.is_closed %}
                            <span class="bg-red-100 text-red-700 text-xs px-2 py-1 rounded mr-2">Закрыто</span>
                        {% endif %}
                        <a href="{% url 'topic_detail' topic.id %}" class="font-semibold text-gray-800 hover:text-[#4395AB]">
                            {{ topic.title }}
                        </a>
                    </td>
                    <td class="px-6 py-4 text-gray-600">{{ topic.author.email }}</td>
                    <td class="px-6 py-4 text-gray-600">{{ topic.comments.count }}</td>
                    <td class="px-6 py-4 text-gray-500 text-sm">{{ topic.updated_at|date:"d.m.Y H:i" }}</td>
                </tr>
                {% empty %}
                <tr>
                    <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                        <i class="fas fa-comments text-3xl mb-2 block"></i>
                        <p>Нет тем. Будьте первым!</p>
                        <a href="{% url 'forum_create' %}" class="text-[#4395AB] hover:underline mt-2 inline-block">Создать тему</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- Пагинация -->
    {% if topics.has_other_pages %}
    <div class="flex justify-center gap-2 mt-6">
        {% if topics.has_previous %}
            <a href="?page={{ topics.previous_page_number }}{% if query %}&q={{ query }}{% endif %}" class="px-3 py-1 border rounded hover:bg-gray-100">←</a>
        {% endif %}
        <span class="px-3 py-1">{{ topics.number }} / {{ topics.paginator.num_pages }}</span>
        {% if topics.has_next %}
            <a href="?page={{ topics.next_page_number }}{% if query %}&q={{ query }}{% endif %}" class="px-3 py-1 border rounded hover:bg-gray-100">→</a>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endblock %}