{% extends 'base.admin.html.twig' %}

{% block body %}
    <div class="max-w-7xl mx-auto">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800 dark:text-white">Tableau de bord</h1>
            <div class="flex space-x-3">
                <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition-colors duration-200">
                    <i class="fas fa-plus mr-2"></i> Ajouter
                </button>
            </div>
        </div>

        <!-- Stats cards -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400 text-sm">Épreuves</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white">1,254</h3>
                    </div>
                    <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300">
                        <i class="fas fa-file-alt text-xl"></i>
                    </div>
                </div>
                <p class="text-green-500 text-sm mt-2">
                    <i class="fas fa-arrow-up mr-1"></i> 12% depuis hier
                </p>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400 text-sm">Matières</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white">24</h3>
                    </div>
                    <div class="p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300">
                        <i class="fas fa-book text-xl"></i>
                    </div>
                </div>
                <p class="text-green-500 text-sm mt-2">
                    <i class="fas fa-arrow-up mr-1"></i> 2 nouvelles
                </p>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400 text-sm">Années</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white">10</h3>
                    </div>
                    <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900 text-yellow-600 dark:text-yellow-300">
                        <i class="fas fa-calendar-alt text-xl"></i>
                    </div>
                </div>
                <p class="text-gray-500 text-sm mt-2">
                    <i class="fas fa-minus mr-1"></i> Pas de changement
                </p>
            </div>

            <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 dark:text-gray-400 text-sm">Séries</p>
                        <h3 class="text-2xl font-bold text-gray-800 dark:text-white">5</h3>
                    </div>
                    <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300">
                        <i class="fas fa-stream text-xl"></i>
                    </div>
                </div>
                <p class="text-red-500 text-sm mt-2">
                    <i class="fas fa-arrow-down mr-1"></i> 1 supprimée
                </p>
            </div>
        </div>

        <!-- Recent activity -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden mb-6">
            <div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Activité récente</h2>
            </div>
            <div class="divide-y divide-gray-200 dark:divide-gray-700">
                <!-- Activity item -->
                <div class="p-6 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150">
                    <div class="flex items-start">
                        <div class="p-2 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 mr-4">
                            <i class="fas fa-file-upload"></i>
                        </div>
                        <div class="flex-1">
                            <div class="flex items-center justify-between">
                                <h3 class="font-medium text-gray-800 dark:text-white">Nouvelle épreuve ajoutée</h3>
                                <span class="text-sm text-gray-500 dark:text-gray-400">2h ago</span>
                            </div>
                            <p class="text-gray-600 dark:text-gray-300 mt-1">Mathématiques - Série D - 2023</p>
                        </div>
                    </div>
                </div>
                <!-- More activity items... -->
            </div>
            <div class="px-6 py-3 border-t border-gray-200 dark:border-gray-700 text-center">
                <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Voir toute l'activité</a>
            </div>
        </div>
    </div>
{% endblock %}