{% load static %}
<!-- Main Sidebar Container Default: sidebar-dark-primary -->
<aside class="main-sidebar sidebar-light-navy elevation-4">  
  <!-- Brand Logo -->
  <a href="/admin/deshbord" class="brand-link">
    <span class="brand-text font-weight-light"> subhost</span>
  </a>

  <!-- Sidebar -->
  <div class="sidebar">
    <!-- Sidebar user (optional) -->
    <div class="user-panel mt-3 pb-3 mb-3 d-flex">
      <div class="image">
        <img src="{% static 'admin/img/user2-160x160.jpg' %}" class="img-circle elevation-2" alt="User Image">
      </div>
      <div class="info">
        <a href="/admin/deshbord" class="d-block"> {{user.profile.user_first_name}} {{user.profile.user_last_name}}</a>
      </div>
    </div>

    <!-- Sidebar Menu -->
    <nav class="mt-2">
      <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
        <!-- Add icons to the links using the .nav-icon class with font-awesome or any other icon font library -->
        <li class="nav-item">
          <a href="/admin/deshbord" class="nav-link">
            <i class="nav-icon fas fa-tachometer-alt"></i>
            <p>
              Dashboard
            </p>
          </a>
        </li>
        <li class="nav-item has-treeview">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-folder"></i>
            <p>
              Employee
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">

            <li class="nav-item">
              <a href="/admin/allemployee/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>All Employee</p>
              </a>
            </li>
          </ul>
          <ul class="nav nav-treeview">

            <li class="nav-item">
              <a href="/admin/addemployee/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>Add Employee</p>
              </a>
            </li>
          </ul>
        </li>
        <li class="nav-item has-treeview">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-folder"></i>
            <p>
              Client
              <i class="fas fa-angle-left right"></i>
            </p>
          </a>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="/admin/addclient/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>All Client</p>
              </a>
            </li>
          </ul>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="/admin/allclient/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>Add Client</p>
              </a>
            </li>
          </ul>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="/admin/clientregistration/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p> Client Registration</p>
              </a>
            </li>
          </ul>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="/admin/bulkproduct/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>Product Bulk Upload </p>
              </a>
            </li>
          </ul>
          <ul class="nav nav-treeview">
            <li class="nav-item">
              <a href="/admin/report/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>Report</p>
              </a>
            </li>
          </ul>
        </li>

        <li class="nav-item has-treeview">
          <a href="#" class="nav-link">
            <i class="nav-icon fas fa-link"></i>
            <p>
              Product
              <i class="right fas fa-angle-left"></i>
            </p>
          </a>
          
          <ul class="nav nav-treeview">
              {% for p in products %}
            <li class="nav-item">
              <a href="/client/product/{{p.pid}}/" class="nav-link">
                <i class="far fa-list-alt nav-icon"></i>
                <p>{{p.pname}}</p>
              </a>
            </li>
            {% endfor %}
          </ul>
        </li>

      </ul>
    </nav>
    <!-- /.sidebar-menu -->
  </div>
  <!-- /.sidebar -->
</aside>

<!-- Messages And Error Messages Alert Boxes -->

<div class="row">
  <div class="col-md-5 mx-auto text-center">
    {% for message in messages %}
      <div class="alert alert-success alert-dismissible fade show mce_message_box mt-2" role="alert">
        {{  message  }}
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    {% endfor %}
  </div>
</div>