<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - {{ web_title }}</title>
    {% block stylesfirst %}{% endblock %}
    <link rel="stylesheet" href="assets/scss/app.scss">
    <link rel="stylesheet" href="assets/scss/themes/dark/app-dark.scss">
    <link rel="shortcut icon" href="assets/static/images/logo/favicon.svg" type="image/x-icon">
    <link rel="shortcut icon" href="assets/static/images/logo/favicon.png" type="image/png">
    {% block styles %}{% endblock %}
</head>

<body>
    <script src="assets/static/js/initTheme.js"></script>
    <div id="app">
        <div id="main" class="layout-horizontal">
            <header class="mb-5">
                <div class="header-top">
                    <div class="container">
                        <div class="logo">
                            <a href="index.html"><img src="assets/static/images/logo/logo.svg" alt="Logo"></a>
                        </div>
                        <div class="header-top-right">

                            <div class="dropdown">
                                <a href="#" id="topbarUserDropdown" class="user-dropdown d-flex align-items-center dropend dropdown-toggle " data-bs-toggle="dropdown" aria-expanded="false">
                                    <div class="avatar avatar-md2" >
                                        <img src="assets/static/images/faces/1.jpg" alt="Avatar">
                                    </div>
                                    <div class="text">
                                        <h6 class="user-dropdown-name">John Ducky</h6>
                                        <p class="user-dropdown-status text-sm text-muted">Member</p>
                                    </div>
                                </a>
                                <ul class="dropdown-menu dropdown-menu-end shadow-lg" aria-labelledby="topbarUserDropdown">
                                  <li><a class="dropdown-item" href="#">My Account</a></li>
                                  <li><a class="dropdown-item" href="#">Settings</a></li>
                                  <li><hr class="dropdown-divider"></li>
                                  <li><a class="dropdown-item" href="auth-login.html">Logout</a></li>
                                </ul>
                            </div>

                            <!-- Burger button responsive -->
                            <a href="#" class="burger-btn d-block d-xl-none">
                                <i class="bi bi-justify fs-3"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <nav class="main-navbar">
                    <div class="container">
                        <ul>
                            {% set maxSubmenuItemY = 8 %}
                            {% for menuItem in horizontalMenuItems %}
                            {% if not menuItem.isTitle %}
                            <li
                                class="menu-item {{ 'active' if (menuItem.url == filename or filename|startsWith(menuItem.key)) }} {{'has-sub' if menuItem.submenu.length > 0 }}">
                                <a href="{{menuItem.url if menuItem.url!==undefined else '#'}}" class='menu-link'>
                                    <span><i class="bi bi-{{ menuItem.icon }}"></i> {{menuItem.name}}</span>
                                </a>{% if menuItem.submenu.length > 0 %}
                                <div
                                    class="submenu {{ 'active' if (sub.url and sub.url == filename or filename|startsWith(sidebarItem.key)) }}">
                                    <!-- Wrap to submenu-group-wrapper if you want 3-level submenu. Otherwise remove it. -->
                                    <div class="submenu-group-wrapper">
                                        {% for sub in menuItem.submenu %}
                                        {% if loop.index % maxSubmenuItemY == 1 %}
                                        <ul class="submenu-group">
                                            {% endif %}
                                            <li
                                                class="submenu-item {{ 'active' if sub.url == filename }} {{'has-sub' if sub.submenu.length > 0 }}">
                                                <a href="{{sub.url if sub.url!==undefined else '#'}}"
                                                    class='submenu-link'>{{ sub.name }}</a>

                                                {% if sub.submenu.length > 0 %}
                                                <!-- 3 Level Submenu -->
                                                <ul class="subsubmenu">
                                                    {% for subsub in sub.submenu %}
                                                    <li class="subsubmenu-item ">
                                                        <a href="{{ subsub.url }}" class="subsubmenu-link">{{
                                                            subsub.name }}</a>
                                                    </li>
                                                    {% endfor %}
                                                </ul>
                                                {% endif %}
                                            </li>
                                            {% if (loop.index % maxSubmenuItemY == 0) or (loop.last) %}
                                        </ul>
                                        {% endif %}
                                        {% endfor %}
                                    </div>
                                </div>{% endif %}
                            </li>
                            {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                </nav>

            </header>

            <div class="content-wrapper container">
                {% block content %}{% endblock %}
            </div>

            <footer>
                <div class="container">
                    <div class="footer clearfix mb-0 text-muted">
                        <div class="float-start">
                            <p>2023 &copy; Mazer</p>
                        </div>
                        <div class="float-end">
                            <p>Crafted with <span class="text-danger"><i class="bi bi-heart"></i></span> by <a
                                href="https://saugi.me">Saugi</a></p>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </div>
    <script src="assets/static/js/components/dark.js"></script>
    <script src="assets/static/js/pages/horizontal-layout.js"></script>
    <script src="assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js"></script>
    {% if isDev %}
    <script src="assets/js/app.js" type="module"></script>
    {% else %}
    <script src="assets/compiled/js/app.js"></script>
    {% endif %}
    {% block js %}{% endblock %}
</body>

</html>