{% extends "base.html" %}

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

{% block meta_description %}Join the CmdForge community. Ask questions, share your projects, and connect with other users.{% endblock %}

{% block content %}
<div class="bg-gray-50 min-h-screen">
    <!-- Hero -->
    <div class="bg-white border-b border-gray-200">
        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <h1 class="text-3xl font-bold text-gray-900">Community Forum</h1>
            <p class="mt-2 text-gray-600">
                Ask questions, share your projects, and connect with other CmdForge users.
            </p>
            <div class="mt-4 flex items-center gap-6 text-sm text-gray-500">
                <span>{{ stats.topics }} topics</span>
                <span>{{ stats.replies }} replies</span>
            </div>
        </div>
    </div>

    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div class="lg:grid lg:grid-cols-3 lg:gap-8">
            <!-- Categories -->
            <div class="lg:col-span-2">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Categories</h2>
                <div class="space-y-3">
                    {% for cat in categories %}
                    <a href="{{ url_for('forum.category', slug=cat.slug) }}"
                       class="block bg-white border border-gray-200 rounded-lg p-4 hover:border-indigo-300 hover:shadow-sm transition-all">
                        <div class="flex items-start justify-between">
                            <div class="flex items-start space-x-3">
                                <!-- Icon -->
                                <div class="flex-shrink-0 w-10 h-10 rounded-lg flex items-center justify-center
                                    {% if cat.icon == 'chat' %}bg-blue-100 text-blue-600
                                    {% elif cat.icon == 'question' %}bg-amber-100 text-amber-600
                                    {% elif cat.icon == 'star' %}bg-purple-100 text-purple-600
                                    {% elif cat.icon == 'lightbulb' %}bg-green-100 text-green-600
                                    {% elif cat.icon == 'book' %}bg-indigo-100 text-indigo-600
                                    {% else %}bg-gray-100 text-gray-600{% endif %}">
                                    {% if cat.icon == 'chat' %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                                    </svg>
                                    {% elif cat.icon == 'question' %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                                    </svg>
                                    {% elif cat.icon == 'star' %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/>
                                    </svg>
                                    {% elif cat.icon == 'lightbulb' %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
                                    </svg>
                                    {% elif cat.icon == 'book' %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/>
                                    </svg>
                                    {% else %}
                                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"/>
                                    </svg>
                                    {% endif %}
                                </div>
                                <div>
                                    <h3 class="font-semibold text-gray-900">{{ cat.name }}</h3>
                                    <p class="text-sm text-gray-600 mt-0.5">{{ cat.description }}</p>
                                </div>
                            </div>
                            <div class="text-right text-sm text-gray-500 flex-shrink-0 ml-4">
                                <div>{{ cat.topic_count }} topics</div>
                                <div class="text-xs">{{ cat.reply_count }} replies</div>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
            </div>

            <!-- Sidebar -->
            <div class="mt-8 lg:mt-0">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h2>
                {% if recent_topics %}
                <div class="bg-white border border-gray-200 rounded-lg divide-y divide-gray-100">
                    {% for topic in recent_topics %}
                    <a href="{{ url_for('forum.topic', topic_id=topic.id, slug=topic.slug) }}"
                       class="block p-3 hover:bg-gray-50 transition-colors">
                        <div class="font-medium text-gray-900 text-sm truncate">{{ topic.title }}</div>
                        <div class="text-xs text-gray-500 mt-1">
                            in {{ topic.category_name }} &middot; {{ topic.reply_count }} replies
                        </div>
                    </a>
                    {% endfor %}
                </div>
                {% else %}
                <div class="bg-white border border-gray-200 rounded-lg p-4 text-center text-gray-500">
                    <p>No topics yet. Be the first to start a discussion!</p>
                </div>
                {% endif %}

                <!-- Quick Links -->
                <div class="mt-6">
                    <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Links</h2>
                    <div class="space-y-2">
                        <a href="{{ url_for('web.docs', path='getting-started') }}"
                           class="flex items-center text-sm text-gray-600 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
                            </svg>
                            Getting Started Guide
                        </a>
                        <a href="{{ url_for('web.tools') }}"
                           class="flex items-center text-sm text-gray-600 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                            Browse Tools
                        </a>
                        <a href="https://gitea.brrd.tech/rob/CmdForge/issues"
                           target="_blank" rel="noopener"
                           class="flex items-center text-sm text-gray-600 hover:text-indigo-600">
                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Report a Bug
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}