{% extends 'layout.html' %}

{% block title %}Panneau d'Administration | Forum Communautaire{% endblock %}

{% block breadcrumb %}
<a href="{{ url_for('forum.index') }}" class="hover:text-blue-600">Accueil</a>
<span class="mx-2">/</span>
<span class="text-gray-700">Administration</span>
{% endblock %}

{% block content %}
<div class="space-y-6">
    <div class="bg-white rounded-lg shadow-sm p-6">
        <h1 class="text-2xl font-bold mb-4">Panneau d'Administration</h1>
        <p class="text-gray-600 mb-6">
            Bienvenue dans le panneau d'administration du forum. Ici, vous pouvez gérer les catégories, les utilisateurs, les signalements et d'autres aspects du forum.
        </p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
                <div class="flex items-start">
                    <div class="bg-blue-100 rounded-full p-3 mr-4">
                        <i data-feather="folder" class="w-6 h-6 text-blue-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg mb-1">Catégories</h3>
                        <p class="text-gray-600 text-sm mb-3">
                            Gérez les catégories du forum pour organiser les discussions.
                        </p>
                        <a href="{{ url_for('admin.manage_categories') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center">
                            Gérer les catégories
                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bg-green-50 p-4 rounded-lg border border-green-100">
                <div class="flex items-start">
                    <div class="bg-green-100 rounded-full p-3 mr-4">
                        <i data-feather="users" class="w-6 h-6 text-green-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg mb-1">Utilisateurs</h3>
                        <p class="text-gray-600 text-sm mb-3">
                            Gérez les comptes utilisateurs, les rôles et les permissions.
                        </p>
                        <a href="{{ url_for('admin.manage_users') }}" class="text-green-600 hover:text-green-800 text-sm font-medium flex items-center">
                            Gérer les utilisateurs
                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bg-red-50 p-4 rounded-lg border border-red-100">
                <div class="flex items-start">
                    <div class="bg-red-100 rounded-full p-3 mr-4">
                        <i data-feather="flag" class="w-6 h-6 text-red-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg mb-1">Signalements</h3>
                        <p class="text-gray-600 text-sm mb-3">
                            Examinez et traitez les contenus signalés par les utilisateurs.
                        </p>
                        <a href="{{ url_for('admin.manage_reports') }}" class="text-red-600 hover:text-red-800 text-sm font-medium flex items-center">
                            Gérer les signalements
                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
                <div class="flex items-start">
                    <div class="bg-purple-100 rounded-full p-3 mr-4">
                        <i data-feather="tag" class="w-6 h-6 text-purple-600"></i>
                    </div>
                    <div>
                        <h3 class="font-semibold text-lg mb-1">Tags</h3>
                        <p class="text-gray-600 text-sm mb-3">
                            Gérez les tags utilisés pour organiser les sujets.
                        </p>
                        <a href="{{ url_for('admin.manage_tags') }}" class="text-purple-600 hover:text-purple-800 text-sm font-medium flex items-center">
                            Gérer les tags
                            <i data-feather="chevron-right" class="w-4 h-4 ml-1"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <i data-feather="pie-chart" class="w-5 h-5 mr-2 text-blue-600"></i>
                Statistiques du Forum
            </h2>
            <div class="space-y-4">
                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                    <span class="text-gray-600">Total des sujets :</span>
                    <span class="font-medium">{{ stats.topics }}</span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                    <span class="text-gray-600">Total des messages :</span>
                    <span class="font-medium">{{ stats.posts }}</span>
                </div>
                <div class="flex justify-between items-center border-b border-gray-100 pb-3">
                    <span class="text-gray-600">Utilisateurs inscrits :</span>
                    <span class="font-medium">{{ stats.users }}</span>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-gray-600">Signalements non résolus :</span>
                    <span class="font-medium {% if stats.unresolved_reports > 0 %}text-red-600{% endif %}">
                        {{ stats.unresolved_reports }}
                    </span>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-sm p-6">
            <h2 class="text-xl font-bold mb-4 flex items-center">
                <i data-feather="activity" class="w-5 h-5 mr-2 text-blue-600"></i>
                Activité Récente
            </h2>
            {% if recent_activities %}
            <div class="space-y-4">
                {% for activity in recent_activities %}
                <div class="flex items-start space-x-3 pb-3 border-b border-gray-100 last:border-0">
                    <div class="bg-gray-100 rounded-full p-2 flex-shrink-0">
                        <i data-feather="{{ activity.icon }}" class="w-4 h-4 text-gray-600"></i>
                    </div>
                    <div class="space-y-1">
                        <p class="text-sm text-gray-700">{{ activity.description }}</p>
                        <p class="text-xs text-gray-500">{{ activity.timestamp | format_datetime }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <p class="text-gray-600 text-sm">Aucune activité récente à afficher.</p>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}