{% extends "admin/base.html" %}

{% block title %}{% if subtitle %}{{ subtitle }} | {% endif %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block branding %}
    <div id="kt_app_header" class="app-header" data-kt-sticky-activate="{default: true, lg: true}">
        <div class="d-lg-none d-flex border-bottom w-100">
            <div class="app-container container-fluid d-flex flex-stack" id="kt_app_header_container">
            <button class="btn btn-icon btn-sm btn-active-color-primary ms-n2" id="kt_app_sidebar_mobile_toggle">
                <i class="ki-outline ki-abstract-14 fs-2"></i>
            </button>
            <a href="{% url 'admin:index' %}">
                <img alt="{{ site_header }}" src="/static/media/logos/custom-2.svg" class="h-30px theme-light-show">
                <img alt="{{ site_header }}" src="/static/media/logos/custom-2.svg" class="h-30px theme-dark-show">
            </a>
            <button class="btn btn-icon btn-sm btn-active-color-primary me-n2" id="kt_app_aside_mobile_toggle">
                <i class="ki-outline ki-menu fs-2"></i>
            </button>
        </div>
        </div>
        <div class="d-none d-lg-block w-100 pt-5">
            <div class="app-container container-fluid d-flex flex-stack " id="kt_app_header_container">
                <div class="d-flex d-lg-none align-items-center me-lg-20 gap-1 gap-lg-2">
                    <div id="kt_app_sidebar_toggle" class="btn btn-icon btn-color-gray-500 btn-active-color-primary w-35px h-35px d-flex d-lg-none">
                        <i class="ki-outline ki-abstract-14 lh-0 fs-1"></i>
                    </div>
                    <a href="{% url 'admin:index' %}">
                        <img alt="{{ site_header }}" src="/static/media/logos/logo.png" class="h-25px theme-light-show">
                        <img alt="{{ site_header }}" src="/static/media/logos/logo.png" class="h-25px theme-dark-show">
                    </a>
                </div>
                <div class="d-flex flex-stack flex-lg-row-fluid" id="kt_app_header_wrapper">
                    <div class="app-page-title d-flex flex-column gap-1 me-3 mb-5 mb-lg-0">
                        <h1 class="fs-2 text-gray-900 fw-bold m-0">{{ title }}</h1>
                        {% block breadcrumbs %}{% endblock %}
                    </div>
                    <div class="app-navbar flex-shrink-0 gap-2 gap-lg-4">
                        <div class="app-navbar-item ms-lg-5" id="kt_header_user_menu_toggle">
                            <div class="d-flex align-items-center" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end">
                                <div class="text-end d-none d-sm-flex flex-column justify-content-center me-3">
                                    <span class="text-gray-500 fs-8 fw-semibold">Welcome,</span>
                                    <a href="#" class="text-gray-800 text-hover-primary fs-7 fw-bold d-block">{% firstof user.get_short_name user.get_username %}</a>
                                </div>

                                <div class="cursor-pointer symbol symbol symbol-circle symbol-35px symbol-md-40px">
                                    <img class="" src="/static/media/avatars/avatar.png" alt="user">
                                    <div class="position-absolute translate-middle bottom-0 mb-1 start-100 ms-n1 bg-success rounded-circle h-8px w-8px">
                                    </div>
                                </div>
                            </div>

                            <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-800 menu-state-bg menu-state-color fw-semibold py-4 fs-6 w-275px" data-kt-menu="true">
                                <div class="menu-item px-3">
                                    <div class="menu-content d-flex align-items-center px-3">
                                        <div class="symbol symbol-50px me-5">
                                            <img alt="Logo" src="/static/media/avatars/avatar.png" class="rounded-4">
                                        </div>
                                        <div class="d-flex flex-column">
                                            <div class="fw-bold d-flex align-items-center fs-5">
                                                {% firstof user.get_short_name user.get_username %} 
                                            </div>
                                            <a href="#" class="fw-semibold text-muted text-hover-primary fs-7">{% firstof user.get_short_name user.email %} </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="separator my-2"></div>
                                {% if user.has_usable_password %}
                                    <div class="menu-item px-5">
                                        <a href="{% url 'admin:password_change' %}" class="menu-link px-5">
                                            Change Password
                                        </a>
                                    </div>
                                {% endif %}
                                <div class="separator my-2"></div>
                                <div class="menu-item px-5" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-placement="left-start" data-kt-menu-offset="-15px, 0">
                                    <a href="#" class="menu-link px-5">
                                        <span class="menu-title position-relative">
                                            Mode
                                            <span class="ms-5 position-absolute translate-middle-y top-50 end-0">
                                                <i class="ki-outline ki-night-day theme-light-show fs-2"></i> 
                                                <i class="ki-outline ki-moon theme-dark-show fs-2"></i> 
                                            </span>
                                        </span>
                                    </a>

                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-title-gray-700 menu-icon-gray-500 menu-active-bg menu-state-color fw-semibold py-4 fs-base w-150px" data-kt-menu="true" data-kt-element="theme-mode-menu">
                                        <div class="menu-item px-3 my-0">
                                            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="light">
                                                <span class="menu-icon" data-kt-element="icon"><i class="ki-outline ki-night-day fs-2"></i></span>
                                                <span class="menu-title">Light</span>
                                            </a>
                                        </div>

                                        <div class="menu-item px-3 my-0">
                                            <a href="#" class="menu-link px-3 py-2 active" data-kt-element="mode" data-kt-value="dark">
                                                <span class="menu-icon" data-kt-element="icon"><i class="ki-outline ki-moon fs-2"></i> </span>
                                                <span class="menu-title">Dark</span>
                                            </a>
                                        </div>

                                        <div class="menu-item px-3 my-0">
                                            <a href="#" class="menu-link px-3 py-2" data-kt-element="mode" data-kt-value="system">
                                                <span class="menu-icon" data-kt-element="icon"><i class="ki-outline ki-screen fs-2"></i> </span>
                                                <span class="menu-title">System</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                <div class="menu-item px-5">
                                    <form id="logout-form" method="post" action="{% url 'admin:logout' %}">
                                        {% csrf_token %}
                                        <button type="submit" class="menu-link px-5 border-0 bg-transparent">Sign Out</button>
                                    </form>
                                    {% comment %} <a href="#" class="menu-link px-5">Sign Out</a> {% endcomment %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block sidebar-logo %}
    <div id="kt_app_sidebar_logo" class="app-sidebar-logo d-flex flex-stack px-9 py-5">
        <a href="{% url 'admin:index' %}">
            <img alt="{{ site_header }}" src="/static/media/logos/logo.png" class="h-30px theme-light-show">
            <img alt="{{ site_header }}" src="/static/media/logos/logo-dark.png" class="h-30px theme-dark-show">
        </a>
        <div class="ms-2">
            <div class="btn btn-icon btn-circle btn-light btn-color-gray-500 btn-active-color-primary w-40px h-40px" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-attach="parent" data-kt-menu-placement="bottom-end" id="kt_activities_toggle">
                <i class="ki-outline ki-notification-on fs-2"></i>
            </div>
        </div>
    </div>
{% endblock sidebar-logo %}
    
{% block nav-global %}{% endblock %}

{% block nav-sidebar %}
    {% include "admin/nav_sidebar.html" %}
{% endblock %}

{% block user-footer %}
    <div class="app-sidebar-footer d-flex flex-stack px-10 py-10" id="kt_app_sidebar_footer">
        <div class="me-2">
            <div class="d-flex align-items-center" data-kt-menu-trigger="{default: 'click', lg: 'hover'}" data-kt-menu-overflow="true" data-kt-menu-placement="top-start">
                <div class="d-flex flex-center symbol symbol-circle symbol-40px">
                    <img src="/static/media/avatars/avatar.png" alt="image">
                </div>
                <div class="d-flex flex-column align-items-start justify-content-center ms-3">
                    <span class="text-gray-500 fs-8 fw-semibold">Welcome, </span>
                    <span class="text-gray-800 fs-7 fw-bold">{% firstof user.get_short_name user.get_username %}</span>
                </div>
            </div>
        </div>

        <form id="logout-form" method="post" action="{% url 'admin:logout' %}">
            {% csrf_token %}
            <button type="submit" class="btn btn-icon btn-color-gray-500 btn-active-color-primary me-n7"><i class="ki-outline ki-exit-right fs-2"></i></button>
        </form>
    </div>
{% endblock user-footer %}
    
{% block footer %}
    <div id="kt_app_footer" class="app-footer">
        <div class="app-container container-fluid d-flex flex-column flex-md-row flex-center flex-md-stack py-3">
            <div class="text-gray-900 order-2 order-md-1">
                <span class="text-muted fw-semibold me-1">&copy; 2024</span>
                <a href="#" target="_blank" class="text-gray-800 text-hover-primary">mingo</a>
            </div>
            <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1">
                <li class="menu-item">
                    <a href="#" target="_blank" class="menu-link px-2">Docs</a>
                </li>
            </ul>
        </div>
    </div>
{% endblock footer %}

{% block scrolltop %}
    <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"><i class="ki-outline ki-arrow-up"></i></div>
{% endblock %}
    