{% load i18n static %}

<nav class="navbar navbar-vertical navbar-expand-lg">
  <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
    <!-- scrollbar removed-->
    <div class="navbar-vertical-content">
      <ul class="navbar-nav flex-column" id="navbarVerticalNav">
        <li class="nav-item">
          <!-- parent pages-->
          <div class="nav-item-wrapper">
            <a class="nav-link dropdown-indicator label-1" href="#nv-dashboards" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-dashboards">
              <div class="d-flex align-items-center">
                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                <span class="nav-link-icon"><span data-feather="pie-chart"></span></span><span class="nav-link-text">Dashboards</span>
              </div>
            </a>
            <div class="parent-wrapper label-1">
              <ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-dashboards">
                <li class="collapsed-nav-item-title d-none">Dashboards</li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'accounting' %}">
                    <div class="d-flex align-items-center"><span class="nav-link-text">Accounting</span></div>
                  </a>
                </li>

                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <div class="d-flex align-items-center"><span class="nav-link-text">Inventory</span></div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <div class="d-flex align-items-center"><span class="nav-link-text">Sales</span></div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <div class="d-flex align-items-center"><span class="nav-link-text">Leads</span></div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <hr class="my-0" />
        <li class="nav-item">
          <!-- label-->
          <p class="navbar-vertical-label">Apps</p>
          <hr class="navbar-vertical-line" />
          <!-- parent pages-->
          <div class="nav-item-wrapper">
            <a class="nav-link dropdown-indicator label-1" href="#nv-inventory" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-inventory">
              <div class="d-flex align-items-center">
                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                <span class="nav-link-icon"><span class="fas fa-warehouse"></span></span><span class="nav-link-text">{% trans "Inventory"|capfirst %}</span>
              </div>
            </a>
            <div class="parent-wrapper label-1">
              <ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-inventory">
                <li class="collapsed-nav-item-title d-none">{% trans "Inventory"|capfirst %}</li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'car_add' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-plus-circle"></span></span><span class="nav-link-text">{% trans "add car"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'inventory_stats' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-car-side"></span></span><span class="nav-link-text">{% trans 'Cars'|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
              </ul>
            </div>
          </div>

          <div class="nav-item-wrapper">
            <a class="nav-link dropdown-indicator label-1" href="#nv-sales" role="button" data-bs-toggle="collapse" aria-expanded="false" aria-controls="nv-sales">
              <div class="d-flex align-items-center">
                <div class="dropdown-indicator-icon-wrapper"><span class="fas fa-caret-right dropdown-indicator-icon"></span></div>
                <span class="nav-link-icon"><span data-feather="shopping-cart"></span></span><span class="nav-link-text">{% trans 'sales'|capfirst %}</span>
              </div>
            </a>
            <div class="parent-wrapper label-1">
              <ul class="nav collapse parent" data-bs-parent="#navbarVerticalCollapse" id="nv-sales">
                <li class="collapsed-nav-item-title d-none">{% trans 'sales'|capfirst %}</li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'vendor_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span data-feather="package"></span></span><span class="nav-link-text">{% trans 'vendors'|capfirst %}</span>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'customer_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'customers'|capfirst %}</span>
                    </div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'organization_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span data-feather="activity"></span></span><span class="nav-link-text">{% trans "Organizations"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'representative_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-users-cog"></span></span><span class="nav-link-text">{% trans "Representatives"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'estimate_create' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-list-ul"></span></span><span class="nav-link-text">{% trans "create quotation"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'estimate_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-clipboard-list"></span></span><span class="nav-link-text">{% trans "quotations"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-cart-plus"></span></span><span class="nav-link-text">{% trans "orders"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'invoice_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-file-invoice"></span></span><span class="nav-link-text">{% trans "invoices"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="{% url 'payment_list' %}">
                    <div class="d-flex align-items-center">
                      <span class="nav-link-icon"><span class="fas fa-money-check"></span></span><span class="nav-link-text">{% trans "payments"|capfirst %}</span>
                    </div>
                  </a>
                  <!-- more inner pages-->
                </li>
              </ul>
            </div>
          </div>
          <!--Add Above -->
        </li>
      </ul>
    </div>
  </div>
  <div class="navbar-vertical-footer">
    <button class="btn navbar-vertical-toggle border-0 fw-semibold w-100 white-space-nowrap d-flex align-items-center">
      <span class="uil uil-left-arrow-to-left fs-8"></span><span class="uil uil-arrow-from-right fs-8"></span><span class="navbar-vertical-footer-text ms-2">Collapsed View</span>
    </button>
  </div>
</nav>
<nav class="navbar navbar-top fixed-top navbar-expand" id="navbarDefault">
  <div class="collapse navbar-collapse justify-content-between">
    <div class="navbar-logo">
      <button
        class="btn navbar-toggler navbar-toggler-humburger-icon hover-bg-transparent"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navbarVerticalCollapse"
        aria-controls="navbarVerticalCollapse"
        aria-expanded="false"
        aria-label="Toggle Navigation"
      >
        <span class="navbar-toggle-icon"><span class="toggle-line"></span></span>
      </button>
      <a class="navbar-brand me-1 me-sm-3" href="{% url 'landing_page' %}">
        <div class="d-flex align-items-center">
          <img class="logo-img d-dark-none" src="{% static 'images/logos/logo-d.png' %}" alt="haikal" width="27" />
          <img class="logo-img d-light-none" src="{% static 'images/logos/logo.png' %}" alt="haikal" width="27" />
          <h5 class="logo-text ms-2 d-none d-sm-block">{% trans 'Haikal' %}</h5>
        </div>
      </a>
    </div>

    <ul class="navbar-nav navbar-nav-icons flex-row">
      <li class="nav-item">
        <div class="theme-control-toggle fa-icon-wait px-2">
          <input class="form-check-input ms-0 theme-control-toggle-input" type="checkbox" data-theme-control="phoenixTheme" value="dark" id="themeControlToggle" />
          <label
            class="mb-0 theme-control-toggle-label theme-control-toggle-light"
            for="themeControlToggle"
            data-bs-theme-value="light"
            data-bs-toggle="tooltip"
            data-bs-placement="left"
            data-bs-title="Switch theme"
            style="height: 32px; width: 32px;">
            <span class="icon" data-feather="moon"></span>
          </label>
          <label
            class="mb-0 theme-control-toggle-label theme-control-toggle-dark"
            for="themeControlToggle"
            data-bs-theme-value="dark"
            data-bs-toggle="tooltip"
            data-bs-placement="left"
            data-bs-title="Switch theme"
            style="height: 32px; width: 32px;">
            <span class="icon" data-feather="sun"></span>
          </label>
        </div>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link" href="#" style="min-width: 2.25rem;" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-bs-auto-close="outside">
          <span class="d-block" style="height: 20px; width: 20px;"><span data-feather="bell" style="height: 20px; width: 20px;"></span></span>
        </a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside" aria-haspopup="true">
          {% if request.LANGUAGE_CODE == 'ar' %}
          <span class="me-1 text-body" data-feather="globe"></span><span class="ms-1">اللغة</span>
          {% else %}
          <span class="me-1 text-body" data-feather="globe"></span><span class="ms-1">Language</span>
          {% endif %}
        </a>
        <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="languageDropdown">
          <div class="card position-relative border-0">
            <div class="card-body p-0">
              <ul class="nav d-flex flex-column mb-2 pb-1">
                <li>
                  <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=en">English</a>
                </li>
                <li>
                  <a class="dropdown-item fw-lighter" href="{% url 'switch_language' %}?language=ar">العربية</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      {% if user.is_authenticated and user.dealer or user.staff %}
      <li class="nav-item dropdown">
        <a class="nav-link lh-1 pe-0" id="navbarDropdownUser" role="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-haspopup="true" aria-expanded="false">
          <div class="avatar avatar-l">
            {% if user.dealer.logo %}
            <img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
                {% elif user.staff.dealer.logo %}
                      <img class="rounded-circle" src="{{ user.staff.dealer.logo.url }}" alt="" />
                      {% else %}
                      <span class="fa fa-user text-body-tertiary" style="width: 32px;"></span>
            {% endif %}
          </div>
        </a>
        <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 dropdown-profile shadow border" aria-labelledby="navbarDropdownUser">
          <div class="card position-relative border-0">
            <div class="card-body p-0">
              <div class="text-center pt-4 pb-3">

                <div class="avatar avatar-xl">
{% if user.dealer.logo %}
                  <img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
                      {% elif user.staff.dealer.logo %}
                      <img class="rounded-circle" src="{{ user.staff.dealer.logo.url }}" alt="" />
                      {% else %}
                      <span class="fa fa-user text-body-tertiary" style="width: 32px;"></span>
                  {% endif %}
                </div>
                <h6 class="mt-2 text-body-emphasis">{{ user.dealer.get_local_name }}</h6>
              </div>
            </div>
            <div class="overflow-auto scrollbar" style="height: 10rem;">
              <ul class="nav d-flex flex-column mb-2 pb-1">
                {% if user.dealer %}
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href="{% url 'dealer_detail' user.dealer.pk %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
                </li>
                {% else %}
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href="{% url 'user_detail' user.staff.pk %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
                </li>
                {% endif %}
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href="{% url 'user_list' %}"><span class="me-2 text-body align-bottom" data-feather="users"></span>{{ _("Staff") }}</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href="{% url 'dealer_activity' %}"> <span class="me-2 text-body align-bottom" data-feather="lock"></span>{{ _("Activity") }}</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="settings"></span>Settings &amp; Privacy </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>Help Center</a>
                </li>
                <li class="nav-item"><a class="nav-link px-3 d-block" href=""> Language</a></li>
              </ul>
            </div>
            <div class="card-footer p-0 border-top border-translucent">
              <ul class="nav d-flex flex-column my-3">
                <li class="nav-item">
                  <a class="nav-link px-3 d-block" href=""> <span class="me-2 text-body align-bottom" data-feather="user-plus"></span>Add another account</a>
                </li>
              </ul>
              <hr />
              <div class="px-3">
                <a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="{% url 'account_logout' %}"> <span class="me-2" data-feather="log-out"> </span>{% trans 'Sign Out' %}</a>
              </div>
              <div class="my-2 text-center fw-bold fs-10 text-body-quaternary">
                <a class="text-body-quaternary me-1" href="">Privacy policy</a>&bull;<a class="text-body-quaternary mx-1" href="">Terms</a>&bull;<a class="text-body-quaternary ms-1" href="">Cookies</a>
              </div>
              {% else %}
              <div class="px-3">
                <a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="{% url 'account_login' %}"> <span class="me-2" data-feather="log-in"> </span>{% trans 'Sign In' %}</a>
              </div>
              <div class="px-3">
                <a class="btn btn-phoenix-secondary d-flex flex-center w-100" href="{% url 'account_signup' %}"> <span class="me-2" data-feather="user-plus"> </span>{% trans 'Sign Up' %}</a>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>