<div class="main-header">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-3 logo-holder"> 
          <!-- ============================================================= LOGO ============================================================= -->
          <div class="logo"> 
              <a href="{{ path('frontend_home_index') }}"> <img src="{{ asset('images/font/logo.png') }}" alt="logo"> </a> 
          </div>
          <!-- /.logo --> 
          <!-- ============================================================= LOGO : END ============================================================= --> </div>
        <!-- /.logo-holder -->
        
        <div class="col-lg-7 col-md-6 col-sm-8 col-xs-12 top-search-holder"> 
          <!-- /.contact-row --> 
          <!-- ============================================================= SEARCH AREA ============================================================= -->
          <div class="search-area">
            <form>
              <div class="control-group">
                <ul class="categories-filter animate-dropdown">
                  <li class="dropdown"> <a class="dropdown-toggle"  data-toggle="dropdown" href="category.html">Categories <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu" >
                      {% for groupe in groupes %}
                        <li class="menu-header"><a href="{{ path('frontend_search_groupe', {id:groupe.getId()} ) }}">{{ groupe.getNom() }}</a></li>
                      {% endfor %}
                    </ul>
                  </li>
                </ul>
                <input class="search-field" placeholder="Search here..." />
                <a class="search-button" href="#" ></a> </div>
            </form>
          </div>
          <!-- /.search-area --> 
          <!-- ============================================================= SEARCH AREA : END ============================================================= --> </div>
        <!-- /.top-search-holder -->
        
        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 animate-dropdown top-cart-row"> 
          <!-- ============================================================= SHOPPING CART DROPDOWN ============================================================= -->
          <div class="dropdown dropdown-cart"> 
            {% if is_granted('ROLE_USER') %}
              <a href="#" class="dropdown-toggle lnk-cart" data-toggle="dropdown">
                <div class="items-cart-inner">
                  <div class="basket">
                  <div class="basket-item-count"><span class="count">{{ nbr }}</span></div>
                  <div class="total-price-basket"> <span class="lbl">Panier</span> <span class="value">{{ total }} DT</span> </div>
                  </div>
                </div>
              </a>
            {% endif %}

            <ul class="dropdown-menu">
              <li>
                <div class="cart-item product-summary">
                  {% for panier in paniers %}
                    {% if panier['type'] == 'SERVICE' %}
                        {% set pathUrl = path('frontend_service_detail', {id: panier['id']} ) %}
                    {% elseif panier['type'] == 'ARTICLE' %}
                        {% set pathUrl = path('frontend_article_detail', {id: panier['id']} ) %}
                    {% endif %}
                    <div class="row">
                      <div class="col-xs-4">
                        <div class="image"> 
                          <a href="{{ pathUrl }}"><img src="{{ asset(panier['image']) }}" alt="{{ panier['titre'] }}"></a> 
                        </div>
                      </div>
                      <div class="col-xs-8">
                        <h3 class="name"><a href="{{ pathUrl }}">{{ panier['titre']|slice(0, 25) }}</a></h3>
                        <div class="price">{{ panier['avance'] }} DT</div>
                      </div>
                    </div>
                    <br>
                  {% endfor %}
                </div>
                <!-- /.cart-item -->
                <div class="clearfix"></div>
                <hr>
                <div class="clearfix cart-total">
                  <div class="pull-right"> <span class="text">Total Avance :</span>
                  <span class='price'>{{ total }} DT</span> 
                  </div>
                  <div class="clearfix"></div>
                    <a href="{{ path('frontend_panier_index')}}" class="btn btn-upper btn-primary btn-block m-t-20">Vérifier</a> 
                  </div>
                <!-- /.cart-total--> 
              </li>
            </ul>
            <!-- /.dropdown-menu--> 
          </div>
          <!-- /.dropdown-cart --> 
          
          <!-- ============================================================= SHOPPING CART DROPDOWN : END============================================================= --> </div>
        <!-- /.top-cart-row --> 
      </div>
      <!-- /.row --> 
      
    </div>
    <!-- /.container --> 
    
  </div>