{% load static %}
{% load roles %}

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>PRINCICALA</title>
  <link rel="stylesheet" href="{% static 'bootstrap.min.css' %}">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  <link rel="stylesheet" href="{% static 'styles.css' %}">
</head>
<body>

<!-- ===================== -->
<!-- SIDEBAR RESPONSIVE -->
<!-- ===================== -->
<nav class="sidebar bg-orange-dark text-white d-none d-md-block col-md-3 col-lg-2 p-3"
     style="background: linear-gradient(90deg, #993d00, #b34700); position: fixed; height: 100vh; overflow-y: auto;">
  
<!-- Profil utilisateur -->
<div class="text-center mb-4 d-flex flex-column align-items-center" style="margin-top:20px;">
    <h6 class="fw-bold text-white mb-2">{{ user.first_name }} {{ user.last_name }}</h6>
    <a href="{% url 'mon_profil' %}">
        {% if user.photo %}
            <img src="{{ user.photo.url }}" alt="Profil"
                 class="rounded-circle img-profil mx-auto"
                 style="width: 80px; height: 80px; object-fit: cover;">
        {% else %}
            <div class="rounded-circle bg-secondary d-flex justify-content-center align-items-center"
                 style="width: 80px; height: 80px;">
                <i class="bi bi-person-circle text-white" style="font-size: 2rem;"></i>
            </div>
        {% endif %}
    </a>
</div>


  <!-- Liens du menu -->
  <ul class="nav flex-column">
    {% if user|has_role:"Employe" or user|has_role:"Administrateur" %}
      <li class="nav-item mb-2">
        <a href="{% url 'mon_profil' %}" class="nav-link text-white"><i class="bi bi-person-circle"></i> Mon profil</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'activites-projet' %}" class="nav-link text-white"><i class="bi bi-list-task"></i> Suivi des Activités</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'employe-conge' %}" class="nav-link text-white"><i class="bi bi-airplane"></i> Mes Congés</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'mes_formations' %}" class="nav-link text-white"><i class="bi bi-journal-text"></i> Mes certificats</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'salle' %}" class="nav-link text-white"><i class="bi bi-calendar-check"></i> Réserver une salle</a>
      </li>
    {% endif %}

    {% if user|has_role:"RH" or user|has_role:"Directeur" or user|has_role:"Assistante" %}
      <li class="nav-item mb-2">
        <a href="{% url 'employe-index' %}" class="nav-link text-white"><i class="bi bi-speedometer2"></i> Tableau de bord</a>
      </li>
      {% if user|has_role:"Assistante" or user|has_role:"RH" %}
        <li class="nav-item mb-2">
          <a href="{% url 'activites-projet' %}" class="nav-link text-white"><i class="bi bi-list-task"></i> Suivi des Activités</a>
        </li>
      {% endif %}
      {% if user|has_role:"Directeur" %}
        <li class="nav-item mb-2">
          <a href="{% url 'directeur' %}" class="nav-link text-white"><i class="bi bi-graph-up"></i> Suivi des Projets</a>
        </li>
      {% endif %}
      <li class="nav-item mb-2">
        <a href="{% url 'projet-index' %}" class="nav-link text-white"><i class="bi bi-folder"></i> Gestion des Projets</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'conge' %}" class="nav-link text-white"><i class="bi bi-airplane"></i> Congés</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'mes_formations' %}" class="nav-link text-white"><i class="bi bi-journal-text"></i> Mes certificats</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'salle' %}" class="nav-link text-white"><i class="bi bi-calendar-check"></i> Réserver une salle</a>
      </li>
      {% if user|has_role:"RH" or user|has_role:"Directeur" %}
        <li class="nav-item mb-2">
          <a href="{% url 'rapport-rh' %}" class="nav-link text-white"><i class="bi bi-graph-up"></i> Rapports et Statistiques</a>
        </li>
      {% endif %}
      <li class="nav-item mb-2">
        <a href="{% url 'mon_profil' %}" class="nav-link text-white"><i class="bi bi-person-circle"></i> Mon profil</a>
      </li>
    {% endif %}

    {% if user|has_role:"Administrateur" %}
      <li class="nav-item mb-2">
        <a href="{% url 'gestion-utilisateurs' %}" class="nav-link text-white"><i class="bi bi-person-gear"></i> Gestion des Utilisateurs</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'parametres-rh' %}" class="nav-link text-white"><i class="bi bi-gear"></i> Paramètres</a>
      </li>
    {% endif %}

    <li class="nav-item mb-2">
      <a href="{% url 'deconnexion' %}" class="nav-link text-white"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
    </li>
  </ul>
</nav>

<!-- ===================== -->
<!-- MENU MOBILE (offcanvas) -->
<!-- ===================== -->
<!-- Bouton burger (visible uniquement sur téléphone) -->
<nav class="navbar navbar-dark bg-orange-dark d-md-none p-2" style="background: linear-gradient(90deg, #993d00, #b34700);">
  <button class="btn btn-light" type="button" data-bs-toggle="offcanvas" data-bs-target="#menuMobile">
    <i class="bi bi-list"></i> Menu
  </button>
</nav>

<!-- Menu Offcanvas mobile -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="menuMobile" style="background: linear-gradient(90deg, #993d00, #b34700); color: white;">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title">{{ user.first_name }} {{ user.last_name }}</h5>
    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <!-- Tu peux copier ici le même <ul> du menu principal -->
    <ul class="nav flex-column">
      <li class="nav-item mb-2">
        <a href="{% url 'mon_profil' %}" class="nav-link text-white"><i class="bi bi-person-circle"></i> Mon profil</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'activites-projet' %}" class="nav-link text-white"><i class="bi bi-list-task"></i> Activités</a>
      </li>
      <li class="nav-item mb-2">
        <a href="{% url 'deconnexion' %}" class="nav-link text-white"><i class="bi bi-box-arrow-right"></i> Déconnexion</a>
      </li>
    </ul>
  </div>
</div>



  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>



