<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/js/bootstrap.min.js" rel="stylesheet">
<!-- ======= Header ======= -->
<header id="header" class="header fixed-top d-flex align-items-center bg-light">
<div class="d-flex align-items-center justify-content-between">
<a style="text-decoration: none;" href="{{ path('home.index') }}" class="logo d-flex align-items-center">
<!--<img src={{ asset("assets/logo/ico.png") }} alt="">-->
<span class="d-none d-lg-block">ToonaERP</span>
</a>
<i class="bi bi-list toggle-sidebar-btn"></i>
</div><!-- End Logo -->
<div class="search-bar">
<form class="search-form d-flex align-items-center" method="POST" action="#">
<input type="text" name="query" placeholder="Search" title="Enter search keyword">
<button type="submit" title="Search"><i class="bi bi-search"></i></button>
</form>
</div><!-- End Search Bar -->
<nav class="header-nav ms-auto">
<ul class="d-flex align-items-center">
<li class="nav-item d-block d-lg-none">
<a class="nav-link nav-icon search-bar-toggle" href="#">
<i class="bi bi-search"></i>
</a>
</li><!-- End Search Icon-->
<div class="d-flex " style="height: 45px;">
<div class="vr border-danger"></div>
</div>
<!-- End bar Icon-->
<li class="nav-item dropdown">
<li class="nav-item dropdown">
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
<i class="bi bi-gear-fill text-dark "></i>
</a>
<!-- End setign Icon -->
</li><!-- End Messages Nav -->
<li class="nav-item dropdown">
<a class="nav-link nav-icon" href="#" data-bs-toggle="dropdown">
<i class="bi bi-question-circle text-dark"></i>
<span class="badge bg-success badge-number"></span>
</a><!-- End Messages Icon -->
</li><!-- End Messages Nav -->
<a class="nav-link nav-icon" href="#" data-bs-toggle="">
<i class="bi bi-bell text-dark"></i>
<span class="badge bg-primary badge-number"></span>
</a><!-- End Notification Icon -->
</li>
<div class="d-flex " style="height: 45px;">
<div class="vr border-danger"></div>
</div>
<li class="nav-item dropdown pe-3">
<a class="nav-link nav-profile d-flex align-items-center pe-0" href="#" data-bs-toggle="dropdown">
<i class="h-25 bi bi-person-circle text-dark"></i>
<span class="d-none d-md-block dropdown-toggle ps-2"></span>
</a>
<!-- End Profile Iamge Icon -->
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-arrow profile">
{% if app.user %}
<li class="dropdown-header">
<h6>{{app.user.email}}</h6>
<span></span>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="">
<i class="bi bi-person"></i>
<span>Mon Profile</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="">
<i class="bi bi-gear"></i>
<span>Paramètres du compte</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="">
<i class="bi bi-question-circle"></i>
<span>Besoin d'aide?</span>
</a>
</li>
<li>
<hr class="dropdown-divider">
</li>
<li>
<a class="dropdown-item d-flex align-items-center" href="{{path('app_logout')}}">
<i class="bi bi-box-arrow-right"></i>
<span>Se déconnecter</span>
</a>
</li>
{% else %}
<li>
<a class="dropdown-item d-flex align-items-center" href="{{path('app_security')}}">
<i class="bi bi-box-arrow-right"></i>
<span>Se connecter</span>
</a>
</li>
{% endif %}
</ul><!-- End Profile Dropdown Items -->
</li><!-- End Profile Nav-->
</ul>
</nav><!-- End Icons Navigation -->
</header><!-- End Header -->
<!-- ======= Sidebar ======= -->
<aside style="background-color: hsl(218, 89%, 14%); line-height: 30px; margin-left: -40px;" id="sidebar" class="sidebar" >
<ul class="sidebar-nav " id="sidebar-nav">
<li class="nav-item">
<a style="font-size: 18px; text-decoration: none; margin-left: 65px;"class="text-light" href="{{ path('home.index') }}">
<span> <i class="bi bi-speedometer"></i> Tableau de bord</span></br>
</a>
</li><!-- End spent Page Nav -->
<li style="padding-top: 20px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px; " class="text-light " data-bs-target="#forms-nav" href="{{ path('app_client_index') }}">
<span><i class="bi bi-person"></i> Client</span>
</a>
</li><!-- End user Nav -->
<li style="padding-top: 10px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#components-nav" data-bs-toggle="" href="{{path('app_article_index')}}">
<span><i class="bi bi-basket2"></i> Article</span>
</a>
<ul id="components-nav" class="nav-content collapse " data-bs-parent="#sidebar-nav">
</ul>
</li><!-- End Article Nav -->
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#tables-nav" data-bs-toggle="collapse" href="{{path('app_journal_comptable_index')}}">
<span><i class="bi bi-journal-text"></i> Journal</span>
</a>
</li><!-- End journal Nav -->
{% if is_granted('ROLE_USER_VENDEUR') %}
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#components-nav" data-bs-toggle="" href="{{path('app_facture_controller2_index')}}">
<span><i class="bi bi-file-earmark"></i> Factures</span>
</a>
</li><!-- End facture Nav -->
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#components-nav" data-bs-toggle="" href="{{path('app_devis_index')}}">
<span><i class="bi bi-receipt"></i> Devis</span>
</a>
</li><!-- End facture Nav -->
{% endif %}
{% if is_granted('ROLE_USER') %}
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#components-nav" data-bs-toggle="" href="{{path('app_taxe_index')}}">
<span><i class="bi bi-file-earmark-font"></i> Taxe</span></br>
</a>
</li><!-- End facture Nav -->
{% endif %}
{% if is_granted('ROLE_ADMIN') %}
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" data-bs-target="#components-nav" data-bs-toggle="" href="{{path('app_vendeur_index')}}">
<span><i class="bi bi-person-vcard-fill"></i> vendeur</span></br>
</a>
</li><!-- End facture Nav -->
{% endif %}
{% if is_granted('ROLE_USER_VENDEUR') %}
<li style="padding-top: 15px; " class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light" href="{{ path('app_depense_index')}} ">
<span><i class="bi bi-currency-exchange"></i> Dépenses</span></br>
</a>
</li><!-- End Dépenses Nav -->
{% endif %}
<li style="padding-top: 15px;" class="nav-item">
<a style="text-decoration: none; margin-left: 65px;" class="text-light " data-bs-target="#charts-nav" data-bs-toggle="collapse" href="#">
<span><i class="bi bi-bar-chart"></i> Rapport</span>
</a>
</li><!-- End report Nav -->
<li style="margin-left: 75px;"class="nav-heading">Pages</li>
{% if is_granted('ROLE_ADMIN') %}
<li style=" margin-left: 65px;" class="nav-item">
<a style="text-decoration: none;" class="text-light " href="{{ path('app_register')}} ">
<span><i class="bi bi-person-circle"></i> User</span>
</a>
</li>
{% endif %}
</ul>
</aside><!-- End Sidebar-->