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

{% block title %}Tableau de bord{{ parent() }}{% endblock %}

{% block body %}
    <div class="container mx-auto p-6 bg-white mt-8 shadow-lg rounded-lg">
        <h1 class="text-4xl lg:text-2xl font-bold mb-6">Tableau de bord</h1>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Card for Menus -->
            <div class="bg-blue-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-blue-800 mb-4">Menus</h2>
                <a href="{{ path('app_menu_index') }}" class="text-3xl lg:text-base btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 lg:py-2 px-4 rounded block">
                    Voir les menus
                </a>
                <a href="{{ path('app_menu_new') }}" class="text-3xl lg:text-base btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer un menu
                </a>
            </div>

            <!-- Card for Reservations -->
            <div class="bg-green-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-green-800 mb-4">Réservations</h2>
                <a href="{{ path('app_reservation_index') }}" class="text-3xl lg:text-base btn bg-green-500 hover:bg-green-700 text-white font-bold py-4 lg:py-2 px-4 rounded block">
                    Voir les réservations
                </a>
                <a href="{{ path('app_reservation_new') }}" class="text-3xl lg:text-base btn bg-green-500 hover:bg-green-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer une réservation
                </a>
            </div>

            <!-- Card for Users -->
            <div class="bg-yellow-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-yellow-800 mb-4">Utilisateurs</h2>
                <a href="{{ path('app_register') }}" class="text-3xl lg:text-base btn bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer un utilisateur
                </a>
            </div>

            <!-- Card for Categories -->
            <div class="bg-red-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-red-800 mb-4">Catégories</h2>
                <a href="{{ path('app_category_index') }}" class="text-3xl lg:text-base btn bg-red-500 hover:bg-red-700 text-white font-bold py-4 lg:py-2 px-4 rounded block">
                    Voir les catégories
                </a>
                <a href="{{ path('app_category_new') }}" class="text-3xl lg:text-base btn bg-red-500 hover:bg-red-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer une catégorie
                </a>
            </div>

            <!-- Card for Item Categories -->
            <div class="bg-purple-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-purple-800 mb-4">Produits</h2>
                <a href="{{ path('app_item_category_index') }}" class="text-3xl lg:text-base btn bg-purple-500 hover:bg-purple-700 text-white font-bold py-4 lg:py-2 px-4 rounded block">
                    Voir les produits
                </a>
                <a href="{{ path('app_item_category_new') }}" class="text-3xl lg:text-base btn bg-purple-500 hover:bg-purple-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer un produit
                </a>
            </div>

            <!-- Card for Contacts -->
            <div class="bg-rose-100 p-6 rounded-lg shadow-md">
                <h2 class="text-4xl lg:text-2xl font-semibold text-rose-800 mb-4">Demandes</h2>
                <a href="{{ path('app_contact_index') }}" class="text-3xl lg:text-base btn bg-rose-500 hover:bg-rose-700 text-white font-bold py-4 lg:py-2 px-4 rounded block">
                    Voir les demandes
                </a>
                <a href="{{ path('app_contact_new') }}" class="text-3xl lg:text-base btn bg-rose-500 hover:bg-rose-700 text-white font-bold py-4 lg:py-2 px-4 rounded mt-2 block">
                    Créer une demande
                </a>
            </div>

        </div>
    </div>
{% endblock %}