{% load static %}
<!-- topbar-right -->
<div class="topbar-right">
    <a href="/" class="text-decoration-none">
        <div class="d-flex align-items-center gap-2">
            <img src="{% static 'images/logo.png' %}" alt="logo-icon">
            <div class="d-flex flex-column">
                <h5 class="small mb-0 fw-bold text-light text-uppercase" style="font-size: .8rem; opacity: .9;">
                    {{ brand }}
                </h5>
            </div>
        </div>
    </a>
    <button id="toggleSidebarRight" class="btn btn-sm toggle-btn">
        <i class="ri-arrow-left-s-line chevron"></i>
    </button>
</div>
<!-- topbar-main -->
<div class="topbar-main">
    <div class="d-flex align-items-center gap-3" style="height: 79px;">
        <img class="d-lg-none" src="{% static 'images/logo.png' %}" alt="logo-icon">
        <button id="mobileToogle" class="btn btn-topbar d-lg-none d-flex align-items-center justify-content-center">
           <i class="ri-menu-2-line"></i>
        </button>
        <div class="vr d-lg-none"></div>
        <h5 class="fw-bold mb-0 text-uppercase fs-6 d-flex align-items-center">
            {{ name_apps }}
        </h5>
    </div>   

    <div class="d-flex align-items-center gap-3">
        <!-- User Profile -->
        <button
            class="btn btn-link text-secondary text-decoration-none d-flex align-items-center gap-3 p-0"
            type="button"
            data-bs-toggle="offcanvas"
            data-bs-target="#profileOffcanvas"
            aria-controls="profileOffcanvas"
            >
            <img src="{%  static 'images/profile.png' %}" alt="Profile Avatar" class="image-profile rounded-circle">
            <div class="d-lg-flex align-items-center gap-1 d-none">
                <div class="d-flex flex-column align-items-start lh-sm">
                    <div class="fw-bold" style="font-size: 1rem;">{{ user.first_name }} {% if user.last_name %}{{ user.last_name|slice:":1" }}.{% endif %}</div>
                    <div class="text-muted small opacity-75">{% if user.is_superuser %}Superuser{% else %}Admin{% endif %}</div>
                </div>
                <!-- <i class="ti ti-chevron-down align-middle"></i> -->
            </div>
        </button>
    </div>
</div>
<!-- topbar-secondary -->
<div class="topbar-secondary d-flex align-items-center justify-content-between">
    <div class="d-flex align-items-center">
        <a href="javascript:history.back()" class="btn-back d-none d-lg-block">
            <i class="ri-arrow-left-double-line"></i>
        </a>
        <div class="vr mx-3 d-none d-lg-block"></div>
        <h5 class="fw-medium mb-0 fs-6 text-light">{{ menu }}</h5>
    </div>
    <nav>
        <ul class="nav nav-pills d-none d-lg-flex overflow-auto flex-nowrap align-items-center">
            {% for menu in context_topbar %}
            <li class="nav-item" role="presentation">
                <a href="{{ menu.url }}" class="nav-link {% if menu.url == '#' %}disabled active{% endif %}">{{ menu.title }}</a>
            </li>
            {% endfor %}
            {% if additional_button and context_topbar %}<div class="vr me-3 align-self-center bg-light" style="height: 18px; opacity: 0.4;"></div>{% endif %}
            {% if additional_button %}
            <li class="nav-item">{{ additional_button|safe }}</li>
            {% endif %}
        </ul>
        {% if additional_button and context_topbar %}
        <div class="dropdown d-lg-none">
            <button class="btn text-light border-0 p-2" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                <i class="ri-menu-line fs-5"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm bz-dropdown-menu">
                {% for menu in context_topbar %}
                <li>
                    <a class="dropdown-item {% if menu.url == '#' %}disabled active{% endif %}" href="{{ menu.url }}">{{ menu.title }}</a>
                </li>
                {% endfor %}
                {% if additional_button and context_topbar %}<li class="px-2"><hr class="dropdown-divider my-2 opacity-25 border-light"></li>{% endif %}
                {% if additional_button %}
                <li>
                   {{ additional_button|safe }}
                </li>
                {% endif %}
            </ul>
        </div>
        {% endif %}
    </nav>
</div>
<!-- Offcanvas Profile Panel -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="profileOffcanvas" aria-labelledby="profileOffcanvasLabel">
    <div class="offcanvas-header border-bottom">
        <div class="d-flex align-items-center w-100">
            <div class="flex-grow-1">
                <p class="offcanvas-title mb-0 fw-bold" id="profileOffcanvasLabel">
                    Your Account
                </p>
                <div class="fsmall mb-0">Last sign-in: {{ user.last_login|date:"d/m/Y H:i" }}</div>
            </div>
            <button type="button" class="btn-close btn-close-white small" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
    </div>
    
    <div class="offcanvas-body p-0">
        <div class="p-4 text-center text-account-dropdown">
            <div class="position-relative d-inline-block mx-auto">
                <div class="profile-img-container">
                    <img src="{%  static 'images/profile.png' %}" class="img img-thumbnail rounded-circle w-50" alt="Profile Avatar">
                </div>
            </div>
            <div class="fw-bold mt-3 mb-2 opacity-75" style="font-size: 1rem;">{{ user.get_full_name|upper }}</div>
            <div class="mt-2">
                <div class="small text-muted opacity-75">
                    <span>{% if user.is_superuser %}Superuser{% else %}Admin{% endif %}</span>
                </div>
                <div class="small text-muted opacity-75">
                    {{ user.email }}
                </div>
            </div>
            <div class="mt-3 text-center">
                <button type="button" class="btn btn-danger btn-bz-size" onclick="location.href='{% url 'logout' %}'">
                    <i class="ri-logout-box-r-line"></i> Sign Out
                </button>
            </div>
        </div>
    </div>
            
    <!-- Copyright -->
    <div class="offcanvas-footer p-3 bg-light"> <div class="text-center text-muted small" style="font-size: 0.75rem;">
        <div class="fw-semibold text-dark mb-1">
            {{ brand_copyright|safe }}
        </div>

        <div class="mb-1">
            {{ repository|safe }}
        </div>

        <div class="d-inline-flex align-items-center justify-content-center">
            Built with 
            <img src="{% static 'images/skoci.ico' %}" alt="Icon" width="14" height="14" class="mx-1"> 
            <span class="fw-semibold text-dark">Skoci Admin</span>
        </div>
    </div>
</div>
</div>