<main class="d-flex flex-nowrap">

{% set route_locale = app.request.attributes.get("_route") %} {# Récupère le nom de la route de la page actuelle #}
<div class="row">
<div class="col-sm-3 col-md-2">
<div class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark" style="width: 280px; height:90vh; border-radius: 10px;">
    <a href="{{path('accueil')}}" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
      <svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"></use></svg>
      <span class="fs-4">ArchHive</span>
    </a>
    <hr>
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
        <a href="{{path('accueil')}}" class= "nav-link text-white
          {{ route_locale == "accueil" ? " active" : "" }}"> {# Ajoute la classe active à la balise si la page correspond au lien du bouton #}

          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="3#home"></use></svg>
          <i class="fa-solid fa-house" style="margin-right: 5px;"></i>
          Accueil
        </a>
      </li>
      <li>
        <a href="{{path('listelivres')}}" class="nav-link text-white
          {{ route_locale == "listelivres" ? " active" : "" }}">
          <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"></use></svg>
          <i class="fa-solid fa-book" style="margin-right: 5px;"></i>
          Livres
        </a>
      </li>

      {%- if is_granted('ROLE_USER') == false -%}
        <li>
          <a href="{{path('connexion')}}" class="nav-link text-white
            {{ route_locale == "connexion" ? " active" : "" }}">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
            <i class="fa-solid fa-angles-right" style="margin-right: 5px;"></i>
            Se connecter
          </a>
        </li>
        <li>
          <a href="{{path('inscription')}}" class="nav-link text-white
            {{ route_locale == "inscription" ? " active" : "" }}">
              <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
              <i class="fa-solid fa-right-to-bracket" style="margin-right: 5px;"></i>
              S'inscrire
          </a>
        </li>
      {%- else -%}
          <li>
          <a href="{{path('profile')}}" class="nav-link text-white
            {{ route_locale == "profile" ? " active" : "" }}">
            <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"></use></svg>
            <i class="fa-solid fa-address-card" style="margin-right: 5px;"></i>
            Mon profil
          </a>
        </li>
        <li>
          <a href="{{path('parametres')}}" class="nav-link text-white
            {{ route_locale == "parametres" ? " active" : "" }}">
              <svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"></use></svg>
              <i class="fa-solid fa-gear" style="margin-right: 5px;"></i>
              Paramètres
          </a>
        </li>
      {%- endif -%}

    </ul>
    <hr>

      <div class="dropdown">
        <a href="{{ path('profile') }}" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">

        {%- if is_granted('ROLE_USER') -%}
          <a href="{{ path('profile') }}" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
          <img src="{{ asset('uploads/imgprofile/' ~ app.user.image) }}" width="50" height="50" class="rounded-circle me-2">
          <strong>{{ app.user.prenom }}</strong>
          <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="{{path('parametres')}}">Paramètres</a></li>
            <li><a class="dropdown-item" href="{{path('profile')}}">Mon profil</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="{{path('logout')}}">Se déconnecter</a></li>
          </ul>
        {%- else -%}
          <a href="{{ path('profile') }}" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" id="dropdownUser1" data-bs-toggle="dropdown" aria-expanded="false">
          <i class="fa-solid fa-user" width="50" height="50" class="rounded-circle me-2"></i>
          <strong>Utilisateur</strong>
        
          <ul class="dropdown-menu dropdown-menu-dark text-small shadow" aria-labelledby="dropdownUser1">
            <li><a class="dropdown-item" href="{{path('connexion')}}">Se connecter</a></li>
            <li><a class="dropdown-item" href="{{path('inscription')}}">S'inscrire</a></li>
          </ul>
        {%- endif -%}
      </div>

  </div>
</div>
</div>
</main>

<script src="/docs/5.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>