{% extends "base.html" %}

{% block title %}{{ topic.title }} - Forum{% endblock %}

{% block content %}
<!-- Topic Header -->
<section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center text-sm text-gray-400 mb-4">
            <a href="{{ url_for('forum_index') }}" class="hover:text-white">Forum</a>
            <span class="mx-2">/</span>
            <a href="{{ url_for('forum_category', slug=topic.category.slug) }}" class="hover:text-white">{{ topic.category.name }}</a>
        </div>
        <div class="flex items-start justify-between">
            <div>
                <h1 class="text-2xl md:text-3xl font-bold mb-2">
                    {% if topic.is_pinned %}
                    <svg class="w-5 h-5 inline mr-2 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M5 5a2 2 0 012-2h6a2 2 0 012 2v2a2 2 0 01-2 2H7a2 2 0 01-2-2V5z"/>
                        <path d="M8 12a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"/>
                        <path fill-rule="evenodd" d="M10 18a1 1 0 01-1-1v-4a1 1 0 112 0v4a1 1 0 01-1 1z" clip-rule="evenodd"/>
                    </svg>
                    {% endif %}
                    {{ topic.title }}
                    {% if topic.is_locked %}
                    <svg class="w-5 h-5 inline ml-2 text-red-400" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
                    </svg>
                    {% endif %}
                </h1>
                <div class="text-gray-400 text-sm">
                    Started by {{ topic.author.username }} &middot; {{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Original Post -->
<section class="py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="card mb-6">
            <div class="flex items-start">
                <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-semibold flex-shrink-0">
                    {{ topic.author.username[0].upper() }}
                </div>
                <div class="ml-4 flex-grow">
                    <div class="flex items-center justify-between mb-2">
                        <div class="font-medium text-gray-900">{{ topic.author.username }}</div>
                        <div class="text-sm text-gray-500">{{ topic.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
                    </div>
                    <div class="prose prose-sm max-w-none text-gray-600">
                        {{ topic.content | safe }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Replies -->
        <div id="replies-list">
            {% if replies %}
            <h2 class="text-lg font-semibold text-gray-900 mb-4">{{ replies|length }} Replies</h2>
            {% for reply in replies %}
            <div class="card mb-4">
                <div class="flex items-start">
                    <div class="w-10 h-10 bg-gray-100 rounded-full flex items-center justify-center text-gray-600 font-semibold flex-shrink-0">
                        {{ reply.author.username[0].upper() }}
                    </div>
                    <div class="ml-4 flex-grow">
                        <div class="flex items-center justify-between mb-2">
                            <div class="font-medium text-gray-900">{{ reply.author.username }}</div>
                            <div class="text-sm text-gray-500">{{ reply.created_at.strftime('%B %d, %Y at %H:%M') }}</div>
                        </div>
                        <div class="prose prose-sm max-w-none text-gray-600">
                            {{ reply.content | safe }}
                        </div>
                    </div>
                </div>
            </div>
            {% endfor %}
            {% endif %}
        </div>

        <!-- Reply Form -->
        {% if not topic.is_locked %}
        <div id="reply-form-container" class="mt-8">
            {% include "forum/partials/reply_form.html" %}
        </div>
        {% else %}
        <div class="card text-center py-8 text-gray-500">
            <svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
            </svg>
            <p>This topic is locked. No new replies can be added.</p>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}