{% load i18n static %}
{% if user.is_authenticated %}
    <nav class="navbar navbar-vertical navbar-expand-lg ">
        <div class="collapse navbar-collapse" id="navbarVerticalCollapse">
            <div class="navbar-vertical-content d-flex flex-column">
                <ul class="navbar-nav flex-column"
                    id="navbarVerticalNav"
                    hx-boost="false"
                    hx-target="#main_content"
                    hx-select="#main_content"
                    hx-swap="outerHTML"
                    hx-select-oob="#toast-container"
                    hx-indicator="#spinner">

                    <li class="nav-item">
                        {% comment %} <p class="navbar-vertical-label text-primary fs-8 text-truncate">{{request.dealer|default:"Apps"}}</p>
                        <hr class="navbar-vertical-line"> {% endcomment %}
                        {% if perms.inventory.can_view_inventory %}
                            <div class="nav-item-wrapper">
                                <a id="inventory-nav"
                                   class="nav-link dropdown-indicator label-1 inventory-nav"
                                   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>
                                        {% if perms.inventory.add_car %}
                                            <li class="nav-item">
                                                <a hx-boost="false"
                                                   id="btn-add-car"
                                                   class="nav-link btn-add-car"
                                                   href="{% url 'car_add' request.dealer.slug %}">
                                                    <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>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_car %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'inventory_stats' request.dealer.slug %}">
                                                    <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>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'car_list' request.dealer.slug %}">
                                                    <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 'Stock'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% comment %} {% if perms.inventory.add_car %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'upload_cars' request.dealer.slug %}">
                                <div class="d-flex align-items-center">
                                <span class="nav-link-icon"><span class="fas fa-file-import"></span></span><span class="nav-link-text">{% trans "Bulk Upload"|capfirst %}</span>
                                </div>
                            </a>
                        </li>
                                        {% endif %} {% endcomment %}
                                        {% if perms.django_ledger.view_purchaseordermodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'purchase_order_list' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-warehouse"></span></span><span class="nav-link-text">{% trans "purchase Orders"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'inventory_list' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-boxes"></span></span><span class="nav-link-text">{% trans "Inventory List"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        {% if perms.inventory.can_view_crm %}
                            <div class="nav-item-wrapper">
                                <a class="nav-link dropdown-indicator label-1"
                                   href="#nv-crm"
                                   role="button"
                                   data-bs-toggle="collapse"
                                   aria-expanded="false"
                                   aria-controls="nv-crm">
                                    <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="phone"></span></span><span class="nav-link-text">{% trans 'crm'|upper %}</span>
                                    </div>
                                </a>
                                <div class="parent-wrapper label-1">
                                    <ul class="nav collapse parent"
                                        data-bs-parent="#navbarVerticalCollapse"
                                        id="nv-crm">
                                        <li class="collapsed-nav-item-title d-none">{% trans 'crm'|upper %}</li>
                                        {% if perms.inventory.view_lead %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'lead_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'lead_tracking' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'leads Tracking'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_opportunity %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'opportunity_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span data-feather="users"></span></span><span class="nav-link-text">{% trans 'Opportunity'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_customer %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'customer_list' request.dealer.slug %}">
                                                    <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>
                                        {% endif %}
                                        {% if perms.inventory.view_organization %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'organization_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-city"></span></span><span class="nav-link-text">{% trans "Organizations"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% comment %} <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>
                  </li>
                  <li class="nav-item">
                  <a class="nav-link" href="{% url 'opportunity_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 "Opportunities"|capfirst %}</span>
                    </div>
                  </a>
                                        </li> {% endcomment %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        {% if perms.django_ledger.can_view_sales %}
                            <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>
                                        {% if perms.django_ledger.add_estimatemodel %}
                                            <li class="nav-item">
                                                <a hx-boost="false"
                                                   class="nav-link"
                                                   href="{% url 'estimate_create' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-handshake"></span></span><span class="nav-link-text">{% trans "create quotation"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_estimatemodel %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'estimate_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-handshake"></span></span><span class="nav-link-text">{% trans "quotations"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_saleorder %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'sales_list' request.dealer.slug %}">
                                                    <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 "Sale Orders"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_invoicemodel %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'invoice_list' request.dealer.slug %}">
                                                    <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>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        {% if perms.django_ledger.can_view_financials %}
                            <div class="nav-item-wrapper">
                                <a class="nav-link dropdown-indicator label-1"
                                   href="#nv-financial"
                                   role="button"
                                   data-bs-toggle="collapse"
                                   aria-expanded="false"
                                   aria-controls="nv-financial">
                                    <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-money-check-alt"></span></span><span class="nav-link-text">{% trans 'Financials' %}</span>
                                    </div>
                                </a>
                                <div class="parent-wrapper label-1">
                                    <ul class="nav collapse parent"
                                        data-bs-parent="#navbarVerticalCollapse"
                                        id="nv-financial">
                                        <li class="collapsed-nav-item-title d-none">{% trans 'Financials' %}</li>
                                        {% if perms.django_ledger.view_accountmodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'coa-list' request.dealer.slug request.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-book-open"></span></span><span class="nav-link-text">{% trans 'Chart of Accounts'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_bankaccountmodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'bank_account_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span data-feather="credit-card"></span></span><span class="nav-link-text">{% trans 'Bank Accounts'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_journalentrymodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'ledger_list' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-book"></span></span><span class="nav-link-text">{% trans "Ledgers"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_additionalservices %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'item_service_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span data-feather="activity"></span></span><span class="nav-link-text">{% trans "Services"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_itemmodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'item_expense_list' request.dealer.slug %}">
                                                    <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 "Expenses"|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.django_ledger.view_vendormodel %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'vendor_list' request.dealer.slug %}">
                                                    <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>
                                        {% endif %}
                                        {% if perms.django_ledger.view_billmodel %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'bill_list' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fa-solid fa-money-bills"></span></span><span class="nav-link-text">{% trans 'bills'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                        {% if perms.inventory.view_journalentrymodel %}
                                            <li class="nav-item">
                                                <a class="nav-link" href="{% url 'payment_list' request.dealer.slug %}">
                                                    <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>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        <!---->
                        {% if perms.django_ledger.can_view_reports %}
                            <div class="nav-item-wrapper">
                                <a class="nav-link dropdown-indicator label-1"
                                   href="#nv-reports"
                                   role="button"
                                   data-bs-toggle="collapse"
                                   aria-expanded="false"
                                   aria-controls="nv-reports">
                                    <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"><i class="fa-solid fa-book-open"></i></span><span class="nav-link-text">{% trans 'Reports' %}</span>
                                    </div>
                                </a>
                                <div class="parent-wrapper label-1">
                                    <ul class="nav collapse parent"
                                        data-bs-parent="#navbarVerticalCollapse"
                                        id="nv-reports">
                                        <li class="collapsed-nav-item-title d-none">{% trans 'Financials' %}</li>
                                        {% if perms.django_ledger.view_accountmodel %}
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'entity-cf' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-solid fa-sack-dollar"></span></span><span class="nav-link-text">{% trans 'Cash Flow'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'entity-ic' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fa-solid fa-sheet-plastic"></span></span><span class="nav-link-text">{% trans 'Income Statement'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link"
                                                   href="{% url 'entity-bs' request.dealer.slug request.dealer.entity.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-solid fa-scale-balanced"></span></span><span class="nav-link-text">{% trans 'Balance Sheet'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <!--car purchase report-->
                                                <a class="nav-link" href="{% url 'po-report' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span><span class="nav-link-text">{% trans 'Car purchase Report'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                            <li class="nav-item">
                                                <!--car sale report-->
                                                <a class="nav-link"
                                                   href="{% url 'car-sale-report' request.dealer.slug %}">
                                                    <div class="d-flex align-items-center">
                                                        <span class="nav-link-icon"><span class="fas fa-chart-pie"></span></span><span class="nav-link-text">{% trans 'Car Sale Report'|capfirst %}</span>
                                                    </div>
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        {% endif %}
                        <!---->
                    </li>
                </ul>
                {# --- Support & Contact Section (New) --- #}
                {% comment %} <div class="mt-auto">
                    <ul class="navbar-nav flex-column">
                        <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-headphones"></span></span>
                                    <span class="nav-link-text">{% trans 'Haikal Support'|capfirst %}</span>
                                </div>
                            </a>
                        </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-phone"></span></span>
                                    <span class="nav-link-text">{% trans 'Haikal Contact'|capfirst %}</span>
                                </div>
                            </a>
                        </li>
                        <li class="nav-item mb-4">
                            <a class="nav-link" href="#">
                                <div class="d-flex align-items-center">
                                    <span class="nav-link-icon"><span class="fas fa-robot"></span></span>
                                    <span class="nav-link-text">{% trans 'Haikal Bot'|capfirst %}</span>
                                </div>
                            </a>
                        </li>

                    </ul>
                </div> {% endcomment %}
            {% endif %}
        </div>
    </div>
    <div class="navbar-vertical-footer">
        <a class="nav-link ps-2" href="{% if request.is_dealer%}{% url 'ticket_list' request.dealer.slug %} {% else %}#{%endif%}">
            <div class="d-flex align-items-center">
                {% if user.is_authenticated%}

                    <span class="nav-link-icon"><span class="fa-solid fa-gear me-1 fs-7"></span></span>
                    <span class="nav-link-text">{{ request.dealer.user.username }}</span>

                {% endif %}
            </div>
         </a>
    </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 'home' %}">
                <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>
        {% if request.user.is_authenticated %}
            <div class="navbar-logo">
                <div class="d-flex align-items-center">
                    {% with name_to_display=request.user.staff.first_name|default:request.dealer.name %}
                        <h6 class="text-gray-600 ms-2 d-none d-sm-block fs-8"
                            data-bs-toggle="tooltip"
                            data-bs-placement="bottom"
                            title="{% trans 'Logged in as ' %}{{ request.user.username }}">
                            {% trans 'Hello,   ' %}{{ name_to_display }}
                        </h6>
                    {% endwith %}
                </div>
            </div>
        {% endif %}
        <ul class="navbar-nav navbar-nav-icons flex-row gap-2" hx-boost="false">
            <li class="nav-item">
                <div class="theme-control-toggle fa-icon-wait">
                    <input class="form-check-input ms-0 theme-control-toggle-input"
                           type="checkbox"
                           data-theme-control="phoenixTheme"
                           value="dark"
                           id="themeControlToggleSm" />
                    <label class="mb-0 theme-control-toggle-label theme-control-toggle-light"
                           for="themeControlToggleSm"
                           data-bs-toggle="tooltip"
                           data-bs-placement="bottom"
                           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="themeControlToggleSm"
                           data-bs-toggle="tooltip"
                           data-bs-placement="bottom"
                           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 lh-1 pe-0"
                   href="#"
                   id="languageDropdown"
                   role="button"
                   data-bs-toggle="dropdown"
                   aria-expanded="false"
                   data-bs-auto-close="outside"
                   aria-haspopup="true">
                    <span class="me-1" data-feather="globe"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-end navbar-dropdown-caret py-0 shadow border"
                     aria-labelledby="languageDropdown">
                    <a class="dropdown-item fw-lighter"
                       href="{% url 'switch_language' %}?language=en">English</a>
                    <a class="dropdown-item fw-lighter"
                       href="{% url 'switch_language' %}?language=ar">عربي</a>
                </div>
            </li>
            {% if user.is_authenticated %}
                {% include "notifications.html" %}
            {% endif %}
            {% if user.is_authenticated and request.is_dealer or request.is_staff %}
                <li class="nav-item dropdown">
                    <a hx-boost="false"
                       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 text-center align-middle">
                            {% if request.is_dealer and user.dealer.logo %}
                                <img class="rounded-circle" src="{{ user.dealer.logo.url }}" alt="" />
                            {% elif request.is_staff and request.staff.logo %}
                                <img class="rounded-circle" src="{{ request.staff.thumbnail.url }}" alt="" />
                            {% else %}
                                <span class="fa fa-user text-body-tertiary fa-2x" 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 request.is_staff and request.staff.logo %}
                                            <img class="rounded-circle" src="{{ request.staff.thumbnail.url }}" alt="" />
                                        {% else %}
                                            <span class="fa fa-user text-body-tertiary fa-2x" style="width: 32px;"></span>
                                        {% endif %}
                                    </div>
                                    {% if request.is_dealer %}
                                        <h6 class="mt-2 text-body-emphasis">{{ user.dealer.get_local_name }}</h6>
                                    {% else %}
                                        <h6 class="mt-2 text-body-emphasis">{{ user.staff.get_local_name }}</h6>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="overflow-auto scrollbar" style="height: 10rem;">
                                <ul class="nav d-flex flex-column mb-2 pb-1">
                                    {% if request.is_dealer %}
                                        <li class="nav-item">
                                            <a class="nav-link px-3 d-block"
                                               href="{% url 'dealer_detail' request.dealer.slug %}"> <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 hx-boost="false"
                                               class="nav-link px-3 d-block"
                                               href="{% url 'staff_detail' request.dealer.slug request.staff.slug %}"> <span class="me-2 text-body align-bottom" data-feather="user"></span><span>{% translate 'profile'|capfirst %}</span></a>
                                        </li>
                                    {% endif %}
                                    {% if request.is_dealer %}
                                        <li class="nav-item">
                                            <a class="nav-link px-3 d-block"
                                               href="{% url 'user_list' request.dealer.slug %}"><span class="me-2 text-body align-bottom" data-feather="users"></span>{{ _("Staff & Groups") }}</a>
                                        </li>
                                        {% comment %} <li class="nav-item">
                      <a class="nav-link px-3 d-block" href="{% url 'dealer_activity'  request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="lock"></span>{{ _("Activities") }}</a>
                                        </li> {% endcomment %}
                                    {% endif %}
                                    <li class="nav-item">
                                        {% if request.is_dealer %}
                                            <a class="nav-link px-3 d-block"
                                               href="{% url 'dealer_settings' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="settings"></span>{{ _("Settings") }}</a>
                                        {% endif %}
                                    </li>
                                    <li class="nav-item">
                                        {% if request.is_dealer %}
                                            <a class="nav-link px-3 d-block"
                                               href="{% url 'management'  request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="shield"></span>{{ _("Admin Managemnet") }}</a>
                                        {% endif %}
                                    </li>
                                    {% if request.is_dealer%}
                                    <li class="nav-item">
                                        <a class="nav-link px-3 d-block"
                                           href="{% url 'ticket_list' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="help-circle"></span>{{ _("Help Center") }}</a>
                                    </li>
                                    {% endif %}
                                    {% if request.is_staff %}
                                        <li class="nav-item">
                                            <a hx-boost="false"
                                               class="nav-link px-3 d-block"
                                               href="{% url 'schedule_calendar' request.dealer.slug %}"> <span class="me-2 text-body align-bottom" data-feather="calendar"></span>{{ _("My Calendar") }}</a>
                                        </li>
                                    {% endif %}
                                    <!--<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-sm btn-phoenix-danger d-flex flex-center w-100"
                                   href="{% url 'account_logout' %}"> <span class="fas fa-power-off me-2"></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="">{% trans 'Privacy policy' %}</a>&bull;<a class="text-body-quaternary mx-1" href="">{% trans 'Terms' %}</a>&bull;<a class="text-body-quaternary ms-1" href="">Cookies</a>
                            </div>
                        {% else %}
                            <div class="px-3">
                                <a class="btn btn-phoenix-succes 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-primary 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>