{% extends "layout.html" %}

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

{% block content %}
<div class="bg-white rounded-lg shadow overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-200">
        <h1 class="text-2xl font-bold text-gray-800">Welcome to our Community Forum</h1>
        <p class="text-gray-600 mt-1">A place to discuss, share and learn together.</p>
    </div>
    
    {% if current_user.is_authenticated %}
    <div class="p-6 bg-blue-50 border-b border-blue-100">
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center">
            <div>
                <h2 class="text-lg font-semibold text-blue-800">Welcome back, {{ current_user.username }}!</h2>
                <p class="text-blue-600 text-sm">What would you like to discuss today?</p>
            </div>
            <a href="{{ url_for('forum.create_topic') }}" class="mt-3 sm:mt-0 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring transition-colors">
                <i data-feather="plus-circle" class="w-4 h-4 inline-block mr-1"></i> Create New Topic
            </a>
        </div>
    </div>
    {% endif %}
    
    <!-- Categories -->
    <div class="p-6">
        {% if categories %}
            <div class="space-y-4">
                {% for category in categories %}
                <div class="bg-white border border-gray-200 rounded-lg hover:border-blue-300 transition-colors">
                    <a href="{{ url_for('forum.category_view', id=category.id) }}" class="block p-4">
                        <div class="sm:flex justify-between items-start">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800 hover:text-blue-600">{{ category.name }}</h3>
                                {% if category.description %}
                                <p class="text-gray-600 mt-1">{{ category.description }}</p>
                                {% endif %}
                            </div>
                            <div class="mt-2 sm:mt-0 flex space-x-6 text-gray-500 text-sm">
                                <div>
                                    <span class="font-medium">{{ category.topic_count() }}</span> topics
                                </div>
                                <div>
                                    <span class="font-medium">{{ category.post_count() }}</span> posts
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-8">
                <p class="text-gray-500">No categories have been created yet.</p>
                {% if current_user.is_authenticated and current_user.is_admin() %}
                <a href="{{ url_for('admin.create_category') }}" class="mt-4 inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    Create First Category
                </a>
                {% endif %}
            </div>
        {% endif %}
    </div>
    
    <!-- Forum Statistics -->
    <div class="px-6 py-4 bg-gray-50 border-t border-gray-200">
        <h3 class="text-lg font-semibold text-gray-700 mb-3">Forum Statistics</h3>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
            {% set topic_count = namespace(total=0) %}
            {% set post_count = namespace(total=0) %}
            
            {% for category in categories %}
                {% set topic_count.total = topic_count.total + category.topic_count() %}
                {% set post_count.total = post_count.total + category.post_count() %}
            {% endfor %}
            
            <div class="bg-white p-4 rounded-lg border border-gray-200">
                <div class="flex items-center">
                    <div class="p-2 rounded-md bg-blue-100 text-blue-500 mr-3">
                        <i data-feather="users" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Members</p>
                        <p class="text-lg font-semibold">{{ user_count if user_count is defined else '—' }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-4 rounded-lg border border-gray-200">
                <div class="flex items-center">
                    <div class="p-2 rounded-md bg-green-100 text-green-500 mr-3">
                        <i data-feather="layers" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Categories</p>
                        <p class="text-lg font-semibold">{{ categories|length }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-4 rounded-lg border border-gray-200">
                <div class="flex items-center">
                    <div class="p-2 rounded-md bg-purple-100 text-purple-500 mr-3">
                        <i data-feather="message-circle" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Topics</p>
                        <p class="text-lg font-semibold">{{ topic_count.total }}</p>
                    </div>
                </div>
            </div>
            
            <div class="bg-white p-4 rounded-lg border border-gray-200">
                <div class="flex items-center">
                    <div class="p-2 rounded-md bg-yellow-100 text-yellow-500 mr-3">
                        <i data-feather="file-text" class="w-5 h-5"></i>
                    </div>
                    <div>
                        <p class="text-sm text-gray-500">Posts</p>
                        <p class="text-lg font-semibold">{{ post_count.total }}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}