<!-- SIDE MENU -->
<div id="dashboard-options-menu" class="side-menu dashboard left closed" ng-controller="initCtrl">
  <!-- SVG PLUS -->
  <svg class="svg-plus">
    <use xlink:href="#svg-plus"></use>
  </svg>
  <!-- /SVG PLUS -->
  <!-- SIDE MENU HEADER -->
  <div class="side-menu-header">
    <!-- USER QUICKVIEW -->
    <div class="user-quickview">
      <!-- USER AVATAR -->
      <a href="author-profile.html">
        <div class="outer-ring">
          <div class="inner-ring"></div>
          <figure class="user-avatar">
            <img src="asset/images/avatars/avatar_01.jpg" alt="avatar">
          </figure>
        </div>
      </a>
      <!-- /USER AVATAR -->
      <!-- USER INFORMATION -->
      <p class="user-money">{{user.username}}</p>
      <p class="user-name">Administrateur</p>
      <!-- /USER INFORMATION -->
    </div>
    <!-- /USER QUICKVIEW -->
  </div>
  <!-- /SIDE MENU HEADER -->
  <!-- DROPDOWN -->
  <ul class="dropdown dark hover-effect interactive">
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item">
      <a href="#!/dashboard">
      <span class="sl-icon icon-speedometer"></span>
      Tableau de bord
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item">
      <a href="#!/clients">
      <span class="sl-icon icon-people"></span>
      Clients
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item">
      <a href="#!/providers">
      <span class="sl-icon icon-organization"></span>
      Fournisseurs
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item active">
      <a href="#!/products">
      <span class="sl-icon icon-basket"></span>
      Produits
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item">
      <a href="#!/stocks">
      <span class="sl-icon icon-list"></span>
      Stocks
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
    <!-- DROPDOWN ITEM -->
    <li class="dropdown-item">
      <a href="#!/orders">
      <span class="sl-icon icon-credit-card"></span>
      Commandes
      </a>
    </li>
    <!-- /DROPDOWN ITEM -->
  </ul>
  <!-- /DROPDOWN -->
  <a href="#!/logout" class="button medium primary">Déconnexion</a>
</div>
<!-- /SIDE MENU -->
<!-- DASHBOARD BODY -->
<div class="dashboard-body">
  <!-- DASHBOARD HEADER -->
  <div class="dashboard-header retracted">
    <!-- DASHBOARD HEADER ITEM -->
    <div class="dashboard-header-item title">
      <!-- DB SIDE MENU HANDLER -->
      <div class="db-side-menu-handler">
        <img src="asset/images/dashboard/db-list-left.png" alt="db-list-left">
      </div>
      <!-- /DB SIDE MENU HANDLER -->
      <img src="asset/images/logo.png" alt="logo">
    </div>
    <!-- /DASHBOARD HEADER ITEM -->
  </div>
  <!-- DASHBOARD HEADER -->
  <!-- DASHBOARD CONTENT -->
  <div class="dashboard-content">
    <!-- HEADLINE -->
    <div class="headline buttons one primary">
      <h4>Produits</h4>
            <a href="#!/product/add" class="button primary">Ajouter</a>
    </div>

    <input type="text"  ng-model="productFilter" name="search_filter" id="search_filter" placeholder="Recherche..." style="margin-bottom: 24px;">

    <!-- PURCHASES LIST -->
    <div class="purchases-list jq-list-product">
      <!-- PURCHASES LIST HEADER -->
      <div class="purchases-list-header">
        <div class="purchases-list-header-date">
          <p class="text-header small">Id</p>
        </div>
        <div class="purchases-list-header-details">
          <p class="text-header small">Produit</p>
        </div>
        <div class="purchases-list-header-price">
          <p class="text-header small">Prix</p>
        </div>
        <div class="purchases-list-header-recommend">
          <p class="text-header small">Actions</p>
        </div>
      </div>
      <!-- /PURCHASES LIST HEADER -->
      <!-- PURCHASE ITEM -->
      <!-- <div class="purchase-item" ng-repeat="product in products | startFrom:currentPage*pageSize | limitTo:pageSize"> -->
      <div class="purchase-item" ng-repeat="product in products |  filter:productFilter as results track by product.designation">
        <div class="purchase-item-date">
          <p class="text-header">{{product.productId}}</p>
        </div>
        <div class="purchase-item-details">
          <!-- ITEM PREVIEW -->
          <div class="item-preview">
            <p class="text-header">{{product.designation}}</p>
            <p class="tiny highlighted">{{product.category}}</p>
            <p class="tiny highlighted">{{product.provider.name}}</p>
          </div>
          <!-- /ITEM PREVIEW -->
        </div>
        <div class="purchase-item-price">
          <p class="price">
            <img ng-if="product.countPrices != 0" src="asset/images/dashboard/star-filled.png" class="visible" alt="star-filled">
            <span>$</span>{{product.price | number: 2}}
          </p>
        </div>
        <div class="purchase-item-recommend">
          <div class="recommendation-wrap">
            <a href="#!/product/{{product.productId}}/prices" class="recommendation good">
            <span class="icon-credit-card"></span>
            </a>
            <a href="#!/product/{{product.productId}}/customs" class="recommendation good">
            <span class="icon-calculator"></span>
            </a>
            <a href="#!/product/edit/{{product.productId}}" class="recommendation good">
            <span class="icon-pencil"></span>
            </a>
            <a href="#!/product/delete/{{product.productId}}" class="recommendation good">
            <span class="icon-trash"></span>
            </a>
            <a ng-if="product.isActive == 1" href="javascript:void(0)" ng-click="disableProduct(product.productId)" class="recommendation good">
            <span class="icon-puzzle"></span>
            </a>
            <a ng-if="product.isActive == 0" href="javascript:void(0)" ng-click="enableProduct(product.productId)" class="recommendation bad">
            <span class="icon-puzzle"></span>
            </a>
            <a ng-if="product.isFeatured == 1" href="javascript:void(0)" ng-click="disfeaturedProduct(product.productId)" class="recommendation good">
            <span class="icon-star"></span>
            </a>
            <a ng-if="product.isFeatured == 0" href="javascript:void(0)" ng-click="featuredProduct(product.productId)" class="recommendation bad">
            <span class="icon-star"></span>
            </a>
          </div>
        </div>
      </div>
      <!-- /PURCHASE ITEM -->
      <!-- PAGER -->
      <!-- <div class="pager-wrap" ng-show="products.length > 0">
        <div class="pager primary">
          <div class="pager-item" ng-click="currentPage > 0 ? currentPage=currentPage-1 : false">
            <p>&laquo;</p>
          </div>
          <div class="pager-item active">
            <p>{{currentPage+1}}</p>
          </div>
          <div class="pager-item" ng-click="currentPage < products.length/pageSize - 1 ? currentPage=currentPage+1 : false">
            <p>&raquo;</p>
          </div>
        </div>
      </div> -->
      <!-- /PAGER -->
    </div>
    <!-- /PURCHASES LIST -->
  </div>
  <!-- DASHBOARD CONTENT -->
</div>
<!-- /DASHBOARD BODY -->
<div class="shadow-film closed"></div>