<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Dashboard</title>
        <!--<link href="{{ url_for('AdminController.static', filename='vendors/bootstrap/bootstrap.min.css') }}" rel="stylesheet" />-->
        <!--<script src="{{ url_for('AdminController.static', filename='vendors/bootstrap/bootstrap.bundle.min.js') }}"></script>-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

        <link href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>

        <script src="{{ url_for('AdminController.static', filename='vendors/simple-datatables/module.min.js') }}"></script>
        <link href="{{ url_for('AdminController.static', filename='vendors/simple-datatables/module.min.css') }}" rel="stylesheet" />

        <script src="{{ url_for('AdminController.static', filename='index.js') }}" type="module"></script>
        <link href="{{ url_for('AdminController.static', filename='vendors/fontawesome/css/fontawesome.css') }}" rel="stylesheet" />
        <link href="{{ url_for('AdminController.static', filename='vendors/fontawesome/css/brands.css') }}" rel="stylesheet" />
        <link href="{{ url_for('AdminController.static', filename='vendors/fontawesome/css/solid.css') }}" rel="stylesheet" />

        <style>
            :root {
                --bg: #0f172a;
                --bg-2: #111827;
                --card: #ffffff;
                --text: #0f172a;
                --muted: #6b7280;
                --brand: #3b82f6;
                --brand-600: #2563eb;
                --ring: rgba(59,130,246,.35);
                --shadow: 0 10px 25px rgba(0,0,0,.15);

                --table-border: #e5e7eb;
                --thead-bg: #f3f4f6;
                --row-hover: #f9fafb;
                --badge-bg: #eef2ff;
                --badge-text: #3730a3;
            }

            html {
                height: auto;
                }

            body {
                margin: 0;
                font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
                background: radial-gradient(1200px 800px at 20% 10%, #1f2937 0%, var(--bg) 60%),
                            radial-gradient(1000px 700px at 80% 90%, #0b1220 0%, var(--bg-2) 60%);
                color: var(--text);
                min-height: 100vh;
                display: flex;
                flex-direction: column;
            }

            .page-content {
                flex: 1 0 auto;
            }

            .card {
                width: 90%;
                background: var(--card);
                box-shadow: var(--shadow);
                margin:  0.75rem auto 1.5rem auto;
            }

            .card-header {
                padding: 20px 24px;
                border-bottom: 1px solid var(--table-border);
                display: flex;
                align-items: center;
                gap: 12px;
                justify-content: space-between;
                flex-wrap: wrap;
            }

            .card-body {
                padding: 0;
            }

            .title {
                margin: 0;
                font-size: 1.25rem;
                line-height: 1.2;
            }

            .navbar-brand img {
                width: 75px;
                height: auto;
            }

            /* Enable hover-open for first-level dropdown (Databases) on larger screens */
            @media (min-width: 992px) {
                .navbar .dropdown:hover > .dropdown-menu {
                    display: block;
                }
            }

            /* Submenu basic positioning */
            .dropdown-submenu {
                position: relative;
            }

            /* Position submenu to the right of its parent */
            .dropdown-submenu > .dropdown-menu {
                top: 0;
                left: 100%;
                margin-left: .1rem;
                margin-right: .1rem;
            }

            /* Show submenu on hover (desktop) */
            @media (min-width: 992px) {
                .dropdown-submenu:hover > .dropdown-menu {
                    display: block;
                }
            }

            /* Right-pointing arrow that mimics Bootstrap's caret */
            .dropdown-toggle-right {
                position: relative;
                padding-right: 1.5rem;
            }

            .dropdown-toggle-right::after {
                display: inline-block;
                margin-left: .255rem;
                vertical-align: .255rem;
                content: "";
                border: .3em solid transparent;
                border-left-color: currentColor;
                transform: rotate(0deg);
            }

            .path-link:hover {
                text-decoration: underline;
            }

        </style>

        {% block styles %}{% endblock %}

        {% if styles is defined %}
            {% for style in styles %}
                {{style | safe}}
            {%endfor%}
        {% endif%}

        <script>
            function removeMsg(id){
                const msg = document.getElementById(id)
                if(!msg){
                    return;
                }
                msg.remove();
            }

            function generateMsg(msg, status, id){
                return `
                    <div class="bg-${status} p-2 text-center w-100 mb-2" id="${id}">${msg}</div>
                `
            }
        
            function setMessage(msg, status){
                const msgContainer = document.querySelector('.messages');
                const msgId = 'msg-' + Math.floor(Math.random() * 1000);
                msgContainer.insertAdjacentHTML('beforeend', generateMsg(msg, status, msgId));
                setTimeout(() => {
                    removeMsg(msgId);
                }, 6000)
            }
        </script>

    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-light bg-light w-100 m-0 mb-2">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ url_for('AdminController.index') }}">
                    <img src="{{ url_for('AdminController.static', filename='pyjolt_logo.png') }}" alt="PyJolt logo" />
                </a>

                <button
                class="navbar-toggler"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
                >
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left side nav -->
                    <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="{{ url_for('AdminController.index') }}">Dashboard</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" aria-current="page" href="{{ url_for('AdminFileController.file_explorer') }}">Files</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a
                                class="nav-link dropdown-toggle"
                                id="dbDropdown"
                                role="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                Databases
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="dbDropdown">
                                <li class="dropdown-submenu">
                                    <a href="{{ url_for('AdminDatabaseController.databases') }}"
                                    role="button" class="dropdown-item">
                                        Overview
                                    </a>
                                </li>
                                {% for db in all_dbs %}
                                <li class="dropdown-submenu">
                                    <!-- This link BOTH navigates AND controls hover submenu -->
                                    <a
                                    class="dropdown-item dropdown-toggle-right"
                                    id="{{ db.db_name }}-db"
                                    href="{{ url_for('AdminDatabaseController.database', db_name=db.db_name) }}"
                                    >
                                        {{ db.nice_name }}
                                    </a>

                                    <!-- Submenu with models -->
                                    <ul class="dropdown-menu" aria-labelledby="{{ db.db_name }}-db">
                                    {% for model in database_models[db.configs_name] %}
                                        <li>
                                        <a
                                            class="dropdown-item"
                                            href="{{ url_for('AdminDatabaseController.model_table', db_name=db.db_name, model_name=model.__name__) }}?page=1&per_page=10"
                                        >
                                            {{ model.__name__ }} Table
                                        </a>
                                        </li>
                                    {% endfor %}
                                    </ul>
                                </li>
                                {% endfor %}
                            </ul>
                        </li>
                        {% if email_clients %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ url_for('AdminEmailClientsController.email_clients') }}" tabindex="-1">Email Clients</a>
                            </li>
                        {% endif %}
                        {% if task_managers %}
                            <li class="nav-item">
                                <a class="nav-link" href="{{ url_for('AdminTaskManagersController.task_managers') }}" tabindex="-1">Task Managers</a>
                            </li>
                        {% endif %}
                    </ul>

                    <!-- Right side nav -->
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                        <li class="nav-item">
                            <a
                                class="nav-link logout"
                                href="#"
                                data-logout-url="{{ url_for(configs.URL_FOR_FOR_LOGOUT) }}"
                                data-login-url="{{ url_for('AdminController.login') }}"
                                role="button"
                            >
                                Logout
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        <div class="messages w-100"></div>
        <div class="page-content">
            {% block content %}{% endblock %}
        </div>
        <footer class="text-center w-100 bg-light p-3 mt-2">PyJolt dashboard</footer>
        {% if scripts is defined %}
            {% for script in scripts %}
                {{script | safe}}
            {% endfor %}
        {% endif %}
        <script>
            const btn = document.querySelector(".logout")
            btn.addEventListener('click', async (event) => {
                const logoutUrl = btn.getAttribute('data-logout-url');
                const loginUrl = btn.getAttribute('data-login-url');
                let response = await fetch(logoutUrl);
                if(response.ok){
                    window.location.href= loginUrl;
                    return;
                }
                return setMessage("Failed to logout from dashboard", "danger")
            })
        </script>
        {% block scripts %}{% endblock %}
    </body>
</html>