{% load i18n static %}
{% block topbar %}
    <!-- Begin page -->
    <!-- Topbar Start -->
    <header class="app-topbar">
        <div class="page-container topbar-menu">
            <div class="d-flex align-items-center gap-2">
                <!-- Brand Logo -->
                <a href="{% url 'admin:index' %}" class="logo">
                    <span class="logo-light">
                        <span class="logo-lg"><img src="{% static 'admin/custom/assets/images/logo.png' %}" alt="logo"></span>
                        <span class="logo-sm"><img src="{% static 'admin/custom/assets/images/logo-sm.png' %}" alt="small logo"></span>
                    </span>
                    <span class="logo-dark">
                        <span class="logo-lg"><img src="{% static 'admin/custom/assets/images/logo-dark.png' %}" alt="dark logo"></span>
                        <span class="logo-sm"><img src="{% static 'admin/custom/assets/images/logo-sm.png' %}" alt="small logo"></span>
                    </span>
                </a>
                <!-- Sidebar Menu Toggle Button -->
                <button class="sidenav-toggle-button px-2">
                    <i class="ti ti-menu-deep fs-24"></i>
                </button>
                <!-- Horizontal Menu Toggle Button -->
                <button class="topnav-toggle-button px-2" data-bs-toggle="collapse" data-bs-target="#topnav-menu-content">
                    <i class="ti ti-menu-deep fs-22"></i>
                </button>
                <!-- Button Trigger Search Modal -->
                <!--<div class="topbar-search text-muted d-none d-xl-flex gap-2 align-items-center" data-bs-toggle="modal" data-bs-target="#searchModal" type="button">
                    <i class="ti ti-search fs-18"></i>
                    <span class="me-2">Search something..</span>
                    <span class="ms-auto fw-medium">⌘K</span>
                </div>-->

                <!-- Mega Menu Dropdown -->
                <!--
                <div class="topbar-item d-none d-md-flex">
                    <div class="dropdown">
                        <a href="#" class="topbar-link btn btn-link px-2 dropdown-toggle drop-arrow-none fw-medium" data-bs-toggle="dropdown" data-bs-trigger="hover" data-bs-offset="0,17" aria-haspopup="false" aria-expanded="false">
                            Pages <i class="ti ti-chevron-down ms-1"></i>
                        </a>

                        <div class="dropdown-menu dropdown-menu-xxl p-0">
                            <div class="row g-0">
                                <div class="col-md-4">
                                    <div class="p-3">
                                        <h5 class="mb-2 fw-semibold">UI Components</h5>
                                        <ul class="list-unstyled megamenu-list">
                                            <li><a href="javascript:void(0);">Widgets</a></li>
                                            <li><a href="javascript:void(0);">Dragula</a></li>
                                            <li><a href="javascript:void(0);">Dropdowns</a></li>
                                            <li><a href="javascript:void(0);">Ratings</a></li>
                                            <li><a href="javascript:void(0);">Sweet Alerts</a></li>
                                            <li><a href="javascript:void(0);">Scrollbar</a></li>
                                            <li><a href="javascript:void(0);">Range Slider</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-md-4">
                                    <div class="p-3">
                                        <h5 class="mb-2 fw-semibold">Applications</h5>
                                        <ul class="list-unstyled megamenu-list">
                                            <li><a href="javascript:void(0);">eCommerce Pages</a></li>
                                            <li><a href="javascript:void(0);">Hospital</a></li>
                                            <li><a href="javascript:void(0);">Email</a></li>
                                            <li><a href="javascript:void(0);">Calendar</a></li>
                                            <li><a href="javascript:void(0);">Kanban Board</a></li>
                                            <li><a href="javascript:void(0);">Invoice Management</a></li>
                                            <li><a href="javascript:void(0);">Pricing</a></li>
                                        </ul>
                                    </div>
                                </div>

                                <div class="col-md-4 bg-light bg-opacity-50">
                                    <div class="p-3">
                                        <h5 class="mb-2 fw-semibold">Extra Pages</h5>
                                        <ul class="list-unstyled megamenu-list">
                                            <li><a href="javascript:void(0);">Left Sidebar with User</a></li>
                                            <li><a href="javascript:void(0);">Menu Collapsed</a></li>
                                            <li><a href="javascript:void(0);">Small Left Sidebar</a></li>
                                            <li><a href="javascript:void(0);">New Header Style</a></li>
                                            <li><a href="javascript:void(0);">My Account</a></li>
                                            <li><a href="pages-coming-soon.html">Maintenance & Coming Soon</a></li>
                                        </ul>
                                    </div> 
                                </div> 
                            </div> 
                        </div> 
                    </div> 
                </div> 
                -->
            </div>

            <div class="d-flex align-items-center gap-2">

                <!-- Light/Dark Mode Button -->
                <div class="topbar-item d-none d-sm-flex">
                    <button class="topbar-link" id="light-dark-mode" type="button">
                        <i class="ti ti-moon fs-22"></i>
                    </button>
                </div>

                <!-- User Dropdown -->
                {% block usertools %}
                    {% if user.is_authenticated %}
                    <div class="topbar-item nav-user">
                        <div class="dropdown">
                            <a class="topbar-link dropdown-toggle drop-arrow-none px-2" data-bs-toggle="dropdown" data-bs-offset="0,19" type="button" aria-haspopup="false" aria-expanded="false">
                               <img src="{% if client and client.photo %}{{ client.photo.url }}{% else %}{% static 'admin/custom/assets/images/users/avatar-1.jpg' %}{% endif %}" 
     width="32" 
     class="rounded-circle me-lg-2 d-flex" 
     alt="user-image">

                                <span class="d-lg-flex flex-column gap-1 d-none">
                                    <h5 class="my-0">{% firstof user.get_short_name user.get_username %}</h5>
                                </span>
                                <i class="ti ti-chevron-down d-none d-lg-block align-middle ms-2"></i>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end">
                                <!-- item-->
                                <div class="dropdown-header noti-title">
                                    <h6 class="text-overflow m-0">Welcome !</h6>
                                </div>

                                <!-- item-->
                                <a href="{% url 'client-profile' %}" class="dropdown-item">
                                    <i class="ti ti-user-hexagon me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">My Profile</span>
                                </a>

                                {% if user.has_usable_password %}
                                <a href="{% url 'admin:password_change' %}" class="dropdown-item">
                                    <i class="ti ti-settings me-1 fs-17 align-middle"></i>
                                    <span class="align-middle">{% translate 'Change password' %}</span>
                                </a>
                                {% endif %}


                                <div class="dropdown-divider"></div>

                                <a href="javascript:void(0);" class="dropdown-item active fw-semibold text-danger">

                                <form method="post" action="{% url 'client-logout' %}">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-danger">
                                        <i class="ti ti-logout me-1 fs-17 align-middle"></i>
                                        <span class="align-middle">{% translate 'Sign out' %}</span>
                                    </button>
                                </form>
                                </a>

                            </div>
                        </div>
                    </div>
                    {% endif %}
                {% endblock %}

            </div>
        </div>
    </header>
    <!-- Topbar End -->
{% endblock %}