{% extends "base.html" %}

{% block title %}Forum{% endblock %}

{% block content %}
<!-- Hero Section -->
<section class="bg-gradient-to-br from-gray-800 to-gray-900 text-white py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-4">Community Forum</h1>
            <p class="text-xl text-gray-300 max-w-2xl mx-auto">
                Connect with other developers, ask questions, share knowledge, and grow together.
            </p>
        </div>
    </div>
</section>

<!-- Forum Categories -->
<section class="py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl font-bold text-gray-900">Categories</h2>
            <div class="relative">
                <input type="text"
                       placeholder="Search topics..."
                       class="input pl-10"
                       hx-get="{{ url_for('forum_search') }}"
                       hx-trigger="keyup changed delay:500ms"
                       hx-target="#search-results"
                       name="q">
                <svg class="w-5 h-5 text-gray-400 absolute left-3 top-1/2 transform -translate-y-1/2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
            </div>
        </div>

        <!-- Search Results Container -->
        <div id="search-results" class="mb-8"></div>

        <!-- Categories List -->
        {% if categories %}
        <div class="space-y-4">
            {% for category in categories %}
            <a href="{{ url_for('forum_category', slug=category.slug) }}" class="card block hover:shadow-lg transition-shadow group">
                <div class="flex items-start">
                    <div class="w-12 h-12 bg-primary-100 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:bg-primary-200 transition-colors">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                        </svg>
                    </div>
                    <div class="ml-4 flex-grow">
                        <h3 class="text-xl font-semibold text-gray-900 group-hover:text-primary-600 transition-colors">
                            {{ category.name }}
                        </h3>
                        <p class="text-gray-600 mt-1">{{ category.description }}</p>
                    </div>
                    <div class="text-right text-sm text-gray-500">
                        <div>{{ category.topics.count() }} topics</div>
                    </div>
                </div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <div class="text-center py-16">
            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                <svg class="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="M17 8h2a2 2 0 012 2v6a2 2 0 01-2 2h-2v4l-4-4H9a1.994 1.994 0 01-1.414-.586m0 0L11 14h4a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2v4l.586-.586z" />
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-900 mb-2">No categories yet</h3>
            <p class="text-gray-600">The forum is being set up. Check back soon!</p>
        </div>
        {% endif %}
    </div>
</section>

<!-- Recent Activity -->
<section class="bg-gray-100 py-16">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Recent Activity</h2>

        {% if recent_topics %}
        <div class="space-y-4">
            {% for topic in recent_topics %}
            <div class="card flex items-center">
                <div class="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600 font-semibold mr-4">
                    {{ topic.author.username[0].upper() }}
                </div>
                <div class="flex-grow">
                    <a href="{{ url_for('forum_topic', category_slug=topic.category.slug, topic_id=topic.id) }}" class="font-medium text-gray-900 hover:text-primary-600">
                        {{ topic.title }}
                    </a>
                    <div class="text-sm text-gray-500">
                        by {{ topic.author.username }} in
                        <a href="{{ url_for('forum_category', slug=topic.category.slug) }}" class="text-primary-600 hover:underline">{{ topic.category.name }}</a>
                    </div>
                </div>
                <div class="text-sm text-gray-500">
                    {{ topic.reply_count }} replies
                </div>
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-600 text-center py-8">No recent activity yet.</p>
        {% endif %}
    </div>
</section>
{% endblock %}
