{% load static %}

{% load tags_personnaliser %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/tabulator_bootstrap5.min.css' %}">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <title>{% block page_titre %} Tableau de bord {% endblock %}</title>
</head>
<body>
    <div class="container-fluid">
        <div class="row vh-100">
            <div class="col-3 bg-danger d-none d-lg-flex flex-column">

                {% if user|has_group:"Administration" %}
                <a href="{% url 'index' %}" class="btn btn-danger py-3 mt-4 fw-bold d-flex" style="font-size: 1.2em;">
                    <i class="bi bi-file-bar-graph d-block" style="width: 50px;"></i>
                    Tableau de bord
                </a>
                {% endif %}

                {% if user|has_group:"Employe" %}
                <a href="{% url 'gestion_produit:index' %}" class="btn btn-danger py-3 mt-1 fw-bold d-flex" style="font-size: 1.2em;">
                    <i class="bi bi-backpack4 d-block" style="width: 50px;"></i>
                    Gestion des produits
                </a>
                {% endif %}

                {% if user|has_group:"Administration" %}
                <a href="{% url 'gestion_fournisseur:index' %}" class="btn btn-danger py-3 mt-1 fw-bold d-flex" style="font-size: 1.2em;">
                    <i class="bi bi-truck d-block" style="width: 50px;"></i>
                    Gestion des fournisseurs
                </a>
                {% endif %}

                {% if user|has_group:"Employe" %}
                <a href="{% url 'gestion_vehicule:index' %}" class="btn btn-danger py-3 mt-1 fw-bold d-flex" style="font-size: 1.2em;">
                    <i class="bi bi-car-front-fill d-block" style="width: 50px;"></i>
                    Gestion des véhicules
                </a>
                {% endif %}
                <a href="{% url 'authentification:deconnexion' %}" class="btn btn-danger py-3 mt-1 fw-bold d-flex" style="font-size: 1.2em;">
                    <i class="bi bi-person-dash d-block" style="width: 50px;"></i>
                    Deconnexion
                </a>
            </div>
            <div class="col-12 col-lg-9" style="overflow-y: auto;">
                <!-- --------------------------------------------------- Navigation mobile -->
                <nav class="navbar navbar-danger bg-danger d-lg-none">
                    <div class="container-fluid">
                        <a class="navbar-brand" href="#">CERFIG</a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
                            <!-- <a class="navbar-brand" href="#">Hidden brand</a> -->
                            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                                {% if user|has_group:"Administration" %}
                                <li class="nav-item">
                                    <a class="nav-link d-flex text-white fw-bold" aria-current="page" href="{% url 'index' %}">
                                        <i class="bi bi-backpack4 d-block" style="width: 50px;"></i>
                                        Tableau de bord
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_group:"Employe" %}
                                <li class="nav-item">
                                    <a class="nav-link d-flex text-white fw-bold" href="{% url 'gestion_produit:index' %}">
                                        <i class="bi bi-backpack4 d-block" style="width: 50px;"></i>
                                        Gestion des produits
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_group:"Administration" %}
                                <li class="nav-item">
                                    <a class="nav-link d-flex text-white fw-bold" href="{% url 'gestion_fournisseur:index' %}" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-truck d-block" style="width: 50px;"></i>
                                        Gestion des fournisseurs
                                    </a>
                                </li>
                                {% endif %}
                                {% if user|has_group:"Employe" %}
                                <li class="nav-item">
                                    <a class="nav-link d-flex text-white fw-bold" href="{% url 'gestion_vehicule:index' %}" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-truck d-block" style="width: 50px;"></i>
                                        Gestion des véhicules
                                    </a>
                                </li>
                                {% endif %}
                                <li class="nav-item">
                                    <a class="nav-link d-flex text-white fw-bold" href="{% url 'authentification:deconnexion' %}" tabindex="-1" aria-disabled="true">
                                        <i class="bi bi-person-dash d-block" style="width: 50px;"></i>
                                        Deconnexion
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </nav>
                 <!-- ------------------------------------------------------ -->
                {% block "contenu" %} {% endblock %}
            </div>
        </div>
    </div>
    <script src="{% static 'js\tabulator.min.js' %}"></script>
    <script src="{% static 'js\bootstrap.min.js' %}"></script>
    {% block "js" %} {% endblock %}
</body>
</html>