{% extends "base.html" %}

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

{% block meta_description %}{{ topic.content[:160] }}{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Header -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
            <!-- Breadcrumb -->
            <nav class="text-sm text-gray-500 mb-4">
                <a href="{{ url_for('forum.index') }}" class="hover:text-indigo-600">Forum</a>
                <span class="mx-2">/</span>
                {% if category %}
                <a href="{{ url_for('forum.category', slug=category.slug) }}" class="hover:text-indigo-600">{{ category.name }}</a>
                <span class="mx-2">/</span>
                {% endif %}
                <span class="text-gray-900 truncate">{{ topic.title[:50] }}{% if topic.title|length > 50 %}...{% endif %}</span>
            </nav>

            <div class="flex items-start justify-between">
                <div>
                    <div class="flex items-center gap-2 flex-wrap">
                        {% if topic.is_pinned %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
                            Pinned
                        </span>
                        {% endif %}
                        {% if topic.is_locked %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                            Locked
                        </span>
                        {% endif %}
                        <h1 class="text-2xl font-bold text-gray-900">{{ topic.title }}</h1>
                    </div>
                    <p class="mt-2 text-sm text-gray-500">
                        {{ topic.view_count }} views &middot; {{ replies|length }} replies
                    </p>
                </div>
            </div>
        </div>
    </div>

    <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="mb-4 p-4 rounded-md {% if category == 'error' %}bg-red-50 text-red-800{% else %}bg-green-50 text-green-800{% endif %}">
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        <!-- Original post -->
        <article class="bg-white border border-gray-200 rounded-lg overflow-hidden">
            <div class="p-6">
                <div class="flex items-center mb-4">
                    <!-- Avatar placeholder -->
                    <div class="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-semibold">
                        {{ topic.author_name[0]|upper }}
                    </div>
                    <div class="ml-3">
                        <div class="font-medium text-gray-900">{{ topic.author_name }}</div>
                        <div class="text-sm text-gray-500">{{ topic.created_at | timeago }}</div>
                    </div>
                </div>
                <div class="prose prose-sm max-w-none">
                    {{ topic.content | markdown | safe }}
                </div>
            </div>
        </article>

        <!-- Replies -->
        {% if replies %}
        <div class="mt-6 space-y-4">
            <h2 class="text-lg font-semibold text-gray-900">{{ replies|length }} {% if replies|length == 1 %}Reply{% else %}Replies{% endif %}</h2>

            {% for reply in replies %}
            <article class="bg-white border border-gray-200 rounded-lg overflow-hidden {% if reply.is_solution %}ring-2 ring-green-500{% endif %}" id="reply-{{ reply.id }}">
                <div class="p-6">
                    <div class="flex items-center mb-4">
                        <!-- Avatar placeholder -->
                        <div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 font-semibold">
                            {{ reply.author_name[0]|upper }}
                        </div>
                        <div class="ml-3 flex-1">
                            <div class="flex items-center gap-2">
                                <span class="font-medium text-gray-900">{{ reply.author_name }}</span>
                                {% if reply.is_solution %}
                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                                    Solution
                                </span>
                                {% endif %}
                            </div>
                            <div class="text-sm text-gray-500">{{ reply.created_at | timeago }}</div>
                        </div>
                    </div>
                    <div class="prose prose-sm max-w-none">
                        {{ reply.content | markdown | safe }}
                    </div>
                </div>
            </article>
            {% endfor %}
        </div>
        {% endif %}

        <!-- Reply form -->
        {% if not topic.is_locked %}
        <div class="mt-8">
            <h2 class="text-lg font-semibold text-gray-900 mb-4">Post a Reply</h2>
            <form method="POST" action="{{ url_for('forum.reply', topic_id=topic.id) }}" class="bg-white border border-gray-200 rounded-lg p-6">
                <!-- Honeypot field (hidden, bots fill this) -->
                <div style="display: none;">
                    <input type="text" name="website_url" tabindex="-1" autocomplete="off">
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    <div>
                        <label for="author_name" class="block text-sm font-medium text-gray-700 mb-1">
                            Your Name <span class="text-red-500">*</span>
                        </label>
                        <input type="text"
                               id="author_name"
                               name="author_name"
                               required
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                               placeholder="John Doe">
                    </div>
                    <div>
                        <label for="author_email" class="block text-sm font-medium text-gray-700 mb-1">
                            Email <span class="text-gray-400">(optional)</span>
                        </label>
                        <input type="email"
                               id="author_email"
                               name="author_email"
                               class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
                               placeholder="john@example.com">
                    </div>
                </div>

                <div class="mb-4">
                    <label for="content" class="block text-sm font-medium text-gray-700 mb-1">
                        Your Reply <span class="text-red-500">*</span>
                    </label>
                    <textarea id="content"
                              name="content"
                              rows="6"
                              required
                              class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 font-mono text-sm"
                              placeholder="Write your reply here... (Markdown supported)"></textarea>
                    <p class="mt-1 text-xs text-gray-500">
                        Markdown is supported: **bold**, *italic*, `code`, ```code blocks```, [links](url)
                    </p>
                </div>

                <div class="flex justify-end">
                    <button type="submit"
                            class="px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                        Post Reply
                    </button>
                </div>
            </form>
        </div>
        {% else %}
        <div class="mt-8 bg-gray-100 border border-gray-200 rounded-lg p-6 text-center">
            <svg class="mx-auto w-8 h-8 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 class="mt-2 text-gray-600">This topic is locked and cannot receive new replies.</p>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}