{% load i18n static dashub admin_urls %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
{% get_dashub_settings request as dashub_settings %}
{% get_theme as theme %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %} data-bs-theme="{{ theme }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="robots" content="none, noarchive">

    <title>{% block title %}{{ title }}{% endblock %} | {{ dashub_settings.site_title }}</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"
          rel="stylesheet">

    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.4/dist/css/tempus-dominus.min.css"
          crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="https://use.hugeicons.com/font/icons.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="{% static 'assets/css/style.css' %}" id="main-style-link">
    <style>
        :root {
            --primary: {{ dashub_settings.theme_color }};
            --primary-rgb: {{ dashub_settings.theme_color_rgb }};
            --td-active-bg: {{ dashub_settings.theme_color }};
            --bs-border-radius: {{ dashub_settings.border_radius }};
        }
    </style>

    {% if dashub_settings.custom_css %}
        <!-- Custom CSS -->
        {% for css in dashub_settings.custom_css %}
            <link rel="stylesheet" href="{{ css }}">
        {% endfor %}
    {% endif %}

    <!-- favicons -->
    <link rel="shortcut icon" href="{{ dashub_settings.site_icon }}" type="image/png">
    <link rel="icon" href="{{ dashub_settings.site_icon }}" sizes="32x32" type="image/png">

    {% block extrastyle %}{% endblock %}
    {% block extrahead %}{% endblock %}
</head>
<body class="hold-transition {% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}"
      data-admin-utc-offset="{% now "Z" %}">

<div class="wrapper">

    {% if not is_popup %}
        <!-- [ Header Topbar ] start -->
        <header class="dh-header">
            <div class="header-wrapper">
                <div class="me-auto dh-mob-drp">
                    <ul class="list-unstyled">
                        <!-- ======= Menu collapse Icon ===== -->
                        <li class="dh-h-item dh-sidebar-collapse">
                            <a href="#" class="dh-head-link ms-0" id="sidebar-hide">
                                <i class="hgi hgi-stroke hgi-menu-01"></i>
                            </a>
                        </li>
                        <li class="dh-h-item dh-sidebar-popup">
                            <a href="#" class="dh-head-link ms-0" id="mobile-collapse">
                                <i class="hgi hgi-stroke hgi-menu-01"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- [Mobile Media Block end] -->
                <div class="ms-auto">
                    <ul class="list-unstyled">
                        <li class="dropdown dropdown-user dh-h-item">
                            <a class="dh-head-link dropdown-toggle arrow-none me-0" data-bs-toggle="dropdown" href="#"
                               role="button" aria-haspopup="false" data-bs-auto-close="outside" aria-expanded="false">
                                <img src="{% get_user_avatar request.user %}" alt="user-image" class="user-avatar"/>
                            </a>
                            <div class="dropdown-menu dropdown-menu-end dh-h-dropdown">
                                <div class="dropdown-header px-0 mb-2 d-flex align-items-center justify-content-between">
                                    <h5 class="m-0">Profile</h5>
                                </div>
                                <div class="dropdown-body">
                                    <div class="notification-scroll position-relative"
                                         style="max-height: calc(100vh - 225px)">
                                        <div class="d-flex mb-1">
                                            <div class="flex-shrink-0">
                                                <img src="{% get_user_avatar request.user %}" alt="{{ request.user }}"
                                                     class="user-avatar wid-35"/>
                                            </div>
                                            <div class="flex-grow-1 ms-3">
                                                <h6 class="mb-0">{{ request.user }}</h6>
                                                <span style="font-size:14px;">{{ request.user.get_role_display }}</span>
                                            </div>
                                        </div>
                                        <hr class="border-secondary border-opacity-50"/>
                                        <p class="text-span">Apperance</p>

                                        <div class="form-group">
                                            <select class="form-control form-select theme_switcher">
                                                <option value="system" {% if theme == 'system' %}selected{% endif %}>
                                                    System Theme
                                                </option>
                                                <option value="light" {% if theme == 'light' %}selected{% endif %}>Light
                                                    Theme
                                                </option>
                                                <option value="dark" {% if theme == 'dark' %}selected{% endif %}>Dark
                                                    Theme
                                                </option>
                                            </select>
                                        </div>

                                        <hr class="border-secondary border-opacity-50"/>

                                        <p class="text-span">Manage</p>
                                        {% get_user_menu user request.current_app|default:"admin" as user_menu %}
                                        {% for link in user_menu %}
                                            <a href="{{ link.url }}" class="dropdown-item">
                                            <span>
                                                <i class="dh-icon text-muted me-2 {{ link.icon }}"></i>
                                                <span>{% trans link.name %}</span>
                                            </span>
                                            </a>
                                        {% endfor %}

                                        {% if perms|can_view_self %}
                                            <a href="{% jazzy_admin_url request.user request.current_app|default:"admin" %}"
                                               class="dropdown-item">
                                                <i class="hgi hgi-stroke hgi-user-circle-02"></i>
                                                <span>{% trans 'View Profile' %}</span>
                                            </a>
                                        {% endif %}

                                        <a href="{% url 'admin:password_change' %}" class="dropdown-item">
                                            <i class="dh-icon text-muted hgi hgi-stroke hgi-reset-password"></i>
                                            <span>{% trans 'Change Password' %}</span>
                                        </a>
                                        <hr class="border-secondary border-opacity-50"/>
                                        <div class="pb-3">
                                            <form method="post" action="{% url 'admin:logout' %}">
                                                {% csrf_token %}
                                                <button class="btn d-flex align-items-center justify-content-center btn-primary w-100">
                                                    <i class="hgi hgi-stroke hgi-logout-03 me-2 dh-icon"></i>
                                                    {% translate 'Log out' %}
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <!-- [ Header ] end -->

        {% block sidebar %}
            {% get_side_menu as side_menu_list %}

            <!-- [ Sidebar Menu ] start -->
            <nav class="dh-sidebar">
                <div class="navbar-wrapper">
                    <div class="m-header">
                        <a href="{% url 'admin:index' %}" class="b-brand text-primary">
                            <img src="{{ dashub_settings.site_logo }}" class="img-fluid logo-lg"
                                 alt="{{ dashub_settings.site_title }}"
                                 {% if dashub_settings.logo_width %}style="width:{{ dashub_settings.logo_width }}"{% endif %}>
                        </a>
                    </div>
                    <div class="navbar-content">
                        <div class="card dh-user-card">
                            <div class="card-body">
                                <div class="d-flex align-items-center">
                                    <div class="flex-shrink-0">
                                        <img src="{% get_user_avatar request.user %}" alt="user-image"
                                             class="user-avatar wid-45 rounded-circle"/>
                                    </div>
                                    <div class="flex-grow-1 ms-3 me-2">
                                        <h6 class="mb-0">
                                            {% if request.user.get_full_name %}
                                                {{ request.user.get_full_name }}
                                            {% else %}
                                                {{ request.user }}
                                            {% endif %}
                                        </h6>
                                        <small>
                                            {% if request.user.get_role_display %}
                                                {{ request.user.get_role_display }}
                                            {% elif request.user.role %}
                                                {{ request.user.role }}
                                            {% elif request.user.email %}
                                                {{ request.user.email }}
                                            {% elif request.user.username %}
                                                {{ request.user.username }}
                                            {% endif %}
                                        </small>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <form class="header_search_form">
                            <i class="hgi hgi-stroke hgi-search-02"></i>
                            <input type="text" class="form-control" placeholder="Search...">
                        </form>

                        <ul class="dh-navbar">
                            {% if dashub_settings.include_dashboard %}
                                <li class="dh-item">
                                    <a href="{% url 'admin:index' %}" class="dh-link">
                                    <span class="dh-micon">
                                        <i class="nav-icon hgi hgi-stroke hgi-home-01"></i>
                                    </span>
                                        <span class="dh-mtext">{% trans "Dashboard" %}</span>
                                    </a>
                                </li>
                            {% endif %}

                            {% for app in side_menu_list %}
                                <li class="dh-item dh-caption">
                                    <label>{{ app.name }}</label>
                                </li>
                                {% for model in app.models %}
                                    {% if model.submenu %}
                                        <li class="dh-item dh-hasmenu">
                                            <a href="#!" class="dh-link">
                                                <span>
                                                    <span class="dh-micon">
                                                        <i class="{{ model.icon }}"></i>
                                                    </span>
                                                    <span class="dh-mtext">{{ model.name }}</span>
                                                </span>
                                                <span class="dh-arrow">
                                                    <i class="hgi hgi-stroke hgi-arrow-right-01"></i>
                                                </span>
                                            </a>

                                            <ul class="dh-submenu" style="display: none;">
                                                {% for submenu in model.submenu %}
                                                    <li class="dh-item"><a class="dh-link"
                                                                           href="{{ submenu.url }}">{{ submenu.name }}</a>
                                                    </li>
                                                {% endfor %}
                                            </ul>
                                        </li>
                                    {% else %}
                                        <li class="dh-item">
                                            {% if model.url %}
                                                <a href="{{ model.url }}" class="dh-link">
                                                        <span class="dh-micon">
                                                            <i class="nav-icon {{ model.icon }}"></i>
                                                        </span>
                                                    <span class="dh-mtext">{{ model.name }}</span>
                                                </a>
                                            {% else %}
                                                <span class="dh-link disabled">
                                                        <span class="dh-micon">
                                                            <i class="nav-icon {{ model.icon }}"></i>
                                                        </span>
                                                        <span class="dh-mtext">{{ model.name }}</span>
                                                    </span>
                                            {% endif %}
                                        </li>
                                    {% endif %}
                                {% endfor %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>

                <div class="dh-menu-overlay d-none"></div>
            </nav>
            <!-- [ Sidebar Menu ] end -->
        {% endblock %}
    {% endif %}

    <div class="content-wrapper dh-container" {% if is_popup %}style="margin-left:0px; padding-top: 20px;"{% endif %}>
        <div class="dh-content">
            {% block page_content %}
                {% if not is_popup %}
                    <!-- [ breadcrumb ] start -->
                    <div class="page-header">
                        <div class="page-block">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="page-header-title w-100">
                                        <h2 class="mb-0">{% block content_title %}{% endblock %}</h2>
                                    </div>
                                    {% block breadcrumbs %}{% endblock %}
                                </div>
                                <div class="col-md-6">
                                    {% block page_actions %}{% endblock %}
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- [ breadcrumb ] end -->
                {% endif %}

                <div class="content">
                    <section id="content" class="content">
                        {% block messages %}
                            {% for message in messages %}
                                {% if message.tags == 'success' %}
                                    <div class="alert alert-success alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                            ×
                                        </button>
                                        <i class="icon fa fa-check"></i>{{ message|capfirst }}
                                    </div>
                                {% elif message.tags == 'error' %}
                                    <div class="alert alert-danger alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                            ×
                                        </button>
                                        <i class="icon fa fa-ban"></i>{{ message|capfirst }}
                                    </div>
                                {% elif message.tags == 'warning' %}
                                    <div class="alert alert-warning alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                            ×
                                        </button>
                                        <i class="icon fa fa-exclamation-triangle"></i>{{ message|capfirst }}
                                    </div>
                                {% elif message.tags == 'info' %}
                                    <div class="alert alert-info alert-dismissible">
                                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">
                                            ×
                                        </button>
                                        <i class="icon fa fa-info"></i>{{ message|capfirst }}
                                    </div>
                                {% endif %}
                            {% endfor %}
                        {% endblock messages %}
                        <div class="row">
                            {% block content %} {% endblock %}
                        </div>
                    </section>
                </div>


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

    <!-- [ Footer ] start -->
    <footer class="dh-footer">
        <div class="footer-wrapper container-fluid">
            {% block footer %}{% endblock %}
        </div>
    </footer>
    <!-- [ Footer ] end -->

</div>

<!-- Required Js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"
        crossorigin="anonymous"></script>
<script type="text/javascript"
        src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.11/dist/js/tempus-dominus.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@eonasdan/tempus-dominus@6.9.11/dist/js/jQuery-provider.js"></script>

{% block extrajs %}{% endblock %}

<script src="{% static 'assets/js/select2.init.js' %}"></script>
<script src="{% static 'assets/js/main.js' %}"></script>
{% if dashub_settings.custom_js %}
    {% for js in dashub_settings.custom_js %}
        <script src="{{ js }}"></script>
    {% endfor %}
{% endif %}

</body>
</html>
