<nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
      
      
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a  class="couv" aria-current="page" href="{% url 'produits:index' %}" >Couverture</a>
          </li>
          <li class="nav-item">
            <a  class="pdp" aria-current="page" href="{% url 'produits:pdp' %}" >PDP</a>
          </li>
        
          <li class="nav-item">
            <a  class="can" href="{% url 'produits:can_prd' %}" >Capacité</a>
          </li>

          <li class="nav-item">
            <a  class="cbn" href="{% url 'produits:Cbn' %}" >CBN</a>
          </li>
          <li class="nav-item">
            <a  class="sm" href="{% url 'produits:stock_min' %}" >Stock Min</a>
          </li>
          <li>
            &nbsp;&nbsp;&nbsp;
          </li>
         <li>
          <div>
            <form action="{% url 'produits:refresh' %}"  style="display: inline;">
              <button type="submit" class="btn btn-outline-success" >Actualiser</button>
            </form>
          </div>
         </li>
        </ul>
      </div>
      
      
      <form action="{% url 'produits:logout' %}" method="post" style="display: inline;">
        {% csrf_token %}
        <button type="submit" class="btn btn-outline-success" >Déconnexion</button>
      </form>
        
         
      

      
    </div>
  </nav>
<style>

  .activatelink{
    background-color: tomato;
    color:#fff;
  }
  
  a {
      text-decoration: none; /* Supprime le soulignement par défaut */
      color: #000000; /* Couleur du texte */
      font-weight: bold; /* Texte en gras */
      padding: 5px 10px; /* Ajoute de l'espacement autour */
      border: 1px solid transparent; /* Bordure par défaut transparente */
      border-radius: 4px; /* Coins arrondis */
      transition: all 0.3s ease; /* Animation fluide sur les changements */
      vertical-align:middle;
    }
</style>
  <script>
    const pathName = window.location.pathname;
    //alert(pathName)
    const pageName = pathName.split("/");
    //alert(pageName[1])
    //console.log(pageName[1]);
    if (pageName[1] === "index") 
    {
     
      document.querySelector(".couv").classList.add("activatelink");
    }

    if (pageName[1] === "pdp" || pageName[1] ==='prd_pdp_detail' || pageName[1] ==='appros') 
    {
      
      document.querySelector(".pdp").classList.add("activatelink");
    }

    if (pageName[1] === "Can_prd") 
    {
      
      document.querySelector(".can").classList.add("activatelink");
    }

    if (pageName[1] === "Cbn") 
    {
      
      document.querySelector(".cbn").classList.add("activatelink");
    }

    if (pageName[1] === "Stock_min") 
    {
     
      document.querySelector(".sm").classList.add("activatelink");
    }

   

    
  </script>