<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{% block title %}Welcome!{% endblock %}</title>
    <link rel="" href="">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Qwitcher+Grypen:wght@400;700&display=swap" rel="stylesheet">
    {#        bootstrap#}
    {#        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">#}

    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('css/ControllerVues/list.css') }}"> <!-- Ajout du fichier CSS -->
        <link rel="stylesheet" href="{{ asset('css/Index/index.css') }}"> <!-- Ajout du fichier CSS -->
        <link rel="stylesheet" href="{{ asset('css/Compte/index.css') }}"> <!-- Ajout du fichier CSS -->
        <link rel="stylesheet" href="{{ asset('css/GestionUtilisateurs/GestionUtilisateurs.css') }}"> <!-- Ajout du fichier CSS -->
    {% endblock %}

{#    {% block javascripts %}#}
{#        <script src="{{ asset('js/Compte/CompteModal.js') }}" defer></script>#}
{#        <script src="{{ asset('js/GestionUtilisateurs/GestionUtilisateurs.js') }}" defer></script>#}
{#        <script src="{{ asset('js/GestionPromotion/GestionPromotion.js') }}" defer></script>#}
{#        <script src="{{ asset('js/GestionTables/GestionTables.js') }}" defer></script>#}
{#        <script src="{{ asset('js/GestionMenu/GestionMenu.js') }}" defer></script>#}
{#        {% block importmap %}{{ importmap('app') }}{% endblock %}#}
{#    {% endblock %}#}
</head>
<body>
{% block body %}
    <style>


    </style>

    <!-- Top Bar -->
    <div class="top-bar">
        <div>
            Bonjour, {{ app.user.prenom }}
        </div>
        <div class="Information-perso">
            <a href="{{ path('update-user', { 'id': app.user.id }) }}" class="btn-info-compte icon-container">
                <i class="icon-medium"> {{ ux_icon('ph:user-circle-fill') }}</i>
                <span>Compte</span>
            </a>
            <div class="btn-info-exit icon-container">
                <a href="{{ path('app_logout') }}" class="icon-medium">
                    {{ ux_icon('iconamoon:exit-bold') }}
                </a>
            </div>
        </div>
    </div>

    <!-- Left Menu -->
    <div class="left-background">
        <img class="LogoHegre" src="{{ asset('asset/image/LogoHegre.png') }}">
        {% if is_granted('ROLE_ADMIN') %}
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="/user/list" class="btn-custom btn-gestion-utilisateurs icon-container">
                            <i class="icon-medium">{{ ux_icon('grommet-icons:group') }}</i>
                            <span>Gérer Utilisateur</span>
                        </a>
                    </li>
                    <li>
                        <a href="/tables" class="btn-custom btn-gestion-table icon-container">
                            <i class="icon-medium"> {{ ux_icon('ic:outline-table-bar') }}</i>
                            <span>Gérer Table</span>
                        </a>
                    </li>
                    <li>
                        <a href="/plats" class="btn-custom btn-gestion-menu icon-container">
                            <i class="icon-medium"> {{ ux_icon('bx:food-menu') }}</i>
                            <span>Gestion Menu</span>
                        </a>
                    </li>
                    <li>
                        <a href="/reductions" class="btn-custom btn-gestion-promotion icon-container">
                            <i class="icon-medium"> {{ ux_icon('lsicon:badge-promotion-outline') }}</i>
                            <span>Gestion Promotion</span>
                        </a>
                    </li>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('fluent-emoji-high-contrast:ten-oclock') }}</i>
                            <span>Voir tendances</span>
                        </div>
                    </li>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
                            <span>Commandes</span>
                        </div>
                    </li>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('fluent-mdl2:reservation-orders') }}</i>
                            <span>Réservation</span>
                        </div>
                    </li>
                </ul>
            </div>
        {% elseif is_granted('ROLE_CUISINIER') %}
            <div class="nav-bar">
                <ul>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
                            <span>Liste des commandes</span>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('grommet-icons:group') }}</i>
                            <span>Je sais pas encore</span>
                        </div>
                    </li>
                </ul>
            </div>
        {% elseif is_granted('ROLE_SERVEUR') %}
            <div class="nav-bar">
                <ul>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('fluent-mdl2:reservation-orders') }}</i>
                            <span>Réservation</span>
                        </div>
                    </li>
                </ul>
                <ul>
                    <li>
                        <div class="btn-custom icon-container">
                            <i class="icon-medium"> {{ ux_icon('icon-park-outline:view-list') }}</i>
                            <span>Commande</span>
                        </div>
                    </li>
                </ul>
            </div>
        {% endif %}
    </div>

{% block container_modal %}
    <div id="container_modal">
        <!-- Contenu par défaut, ou vous p ouvez laisser vide -->
    </div>
{% endblock %}

    <script>

    </script>

    <!-- Include modals -->

{% endblock %}
{#        bootstrap#}
{#        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>#}
{#        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>    </body>#}
</body>
</html>
