{% extends "base.html" %}

{% block title %}New Topic in {{ category.name }} - Forum{% endblock %}

{% block meta_description %}Start a new discussion in {{ category.name }}.{% 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-3xl 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>
                <a href="{{ url_for('forum.category', slug=category.slug) }}" class="hover:text-indigo-600">{{ category.name }}</a>
                <span class="mx-2">/</span>
                <span class="text-gray-900">New Topic</span>
            </nav>

            <h1 class="text-2xl font-bold text-gray-900">New Topic in {{ category.name }}</h1>
        </div>
    </div>

    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
        {% if error %}
        <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md text-red-800">
            {{ error }}
        </div>
        {% endif %}

        <form method="POST" 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>

            <!-- Author info -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <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
                           value="{{ form_data.author_name if form_data else '' }}"
                           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"
                           value="{{ form_data.author_email if form_data else '' }}"
                           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">
                    <p class="mt-1 text-xs text-gray-500">Used for Gravatar only, not displayed publicly.</p>
                </div>
            </div>

            <!-- Title -->
            <div class="mb-6">
                <label for="title" class="block text-sm font-medium text-gray-700 mb-1">
                    Topic Title <span class="text-red-500">*</span>
                </label>
                <input type="text"
                       id="title"
                       name="title"
                       required
                       value="{{ form_data.title if form_data else '' }}"
                       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="How do I...?">
                <p class="mt-1 text-xs text-gray-500">Be specific and descriptive (5-200 characters).</p>
            </div>

            <!-- Content -->
            <div class="mb-6">
                <label for="content" class="block text-sm font-medium text-gray-700 mb-1">
                    Content <span class="text-red-500">*</span>
                </label>
                <textarea id="content"
                          name="content"
                          rows="12"
                          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="Describe your question, idea, or project in detail...">{{ form_data.content if form_data else '' }}</textarea>
                <p class="mt-1 text-xs text-gray-500">
                    Markdown is supported: **bold**, *italic*, `code`, ```code blocks```, [links](url)
                </p>
            </div>

            <!-- Tips -->
            <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-md">
                <h3 class="text-sm font-medium text-blue-800 mb-2">Tips for a great post:</h3>
                <ul class="text-sm text-blue-700 space-y-1 list-disc list-inside">
                    <li>Search first to avoid duplicate topics</li>
                    <li>Use a clear, descriptive title</li>
                    <li>Include relevant details and context</li>
                    <li>For bugs, include steps to reproduce</li>
                    <li>Format code with triple backticks: ```code```</li>
                </ul>
            </div>

            <!-- Submit -->
            <div class="flex items-center justify-between">
                <a href="{{ url_for('forum.category', slug=category.slug) }}"
                   class="text-gray-600 hover:text-gray-900">
                    Cancel
                </a>
                <button type="submit"
                        class="px-6 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">
                    Create Topic
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}