{% load custom_filters %}
<div class="d-flex flex-column flex-shrink-0 p-3 m-0 text-white min-vh-100 sticky-top min-vh-98">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <svg class="bi me-2" width="40" height="32">
      <use xlink:href="#bootstrap" />
    </svg>
    <span class="fs-4 mx-auto">SYSTRAITE</span>
  </a>
  <hr />
  <ul class="nav nav-pills flex-column mb-auto">
    <li class="nav-item">
      <a href="{% url 'traiteapp:dashboard' %}" class="nav-link text-white {% if request.path == '/traite/dashboard' %}active{% endif %}" aria-current="page">Tableau de bord</a>
    </li>
    <li>
      <a href="{% url 'traiteapp:traite' %}" class="nav-link text-white {% if request.path in '/traite/traite /traite/add-traite' or request.path|startswith:'/traite/details_traite/' %}active{% endif %}">Cas de traite</a>
    </li>

    <li>
      <a href="{% url 'traiteapp:victimes' %}" class="nav-link text-white {% if request.path == '/traite/victimes' %}active{% endif %}">Victimes</a>
    </li>
    <li>
      <a href="{% url 'traiteapp:trafiquants' %}" class="nav-link text-white {% if request.path == '/traite/trafiquants' %}active{% endif %}">Auteurs de traite</a>
    </li>
    {% if user.role == 'admin' %}
    {% comment %} <li>
      <a href="{% url 'traiteapp:rapports' %}" class="nav-link text-white {% if request.path == '/traite/rapports' %}active{% endif %}">Rapports</a>
    </li> {% endcomment %}
    
    <li>
      <a href="{% url 'traiteapp:parametres' %}" class="nav-link text-white {% if  request.path|startswith:'/traite/parametres' %}active{% endif %}">Paramètres</a>
    </li>
    {% endif %}
  </ul>
  <hr />
  <div class="dropdown bg-white p-2 rounded ">
    <a href="#" class="d-flex align-items-center text-dark-blue text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
      <!-- <img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2" /> -->
      <i class="bi bi-person-circle me-2 fs-5" ></i>
      <strong>{{ request.user }}</strong>
    </a>
    <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
      <li>
        <a class="dropdown-item" href="#">Profil</a>
      </li>
      <li>
        <hr class="dropdown-divider" />
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'account:logout' %}">Se déconnecter</a>
      </li>
    </ul>
  </div>
</div>