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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>Admin Dashboard</title>
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body.dark-mode {
            background-color: #181a1b !important;
            color: #e0e0e0 !important;
        }

        .dark-mode .card,
        .dark-mode .table {
            background-color: #23272b !important;
            color: #e0e0e0 !important;
        }

        .dark-mode .table thead,
        .dark-mode .table tbody,
        .dark-mode .table th,
        .dark-mode .table td,
        .dark-mode .table tr {
            background-color: #23272b !important;
            color: #e0e0e0 !important;
            border-color: #444 !important;
        }

        .dark-mode .card-title,
        .dark-mode .display-4,
        .dark-mode h5 {
            color: #e0e0e0 !important;
        }

        .dark-mode input {
            background-color: #23272b !important;
            color: #e0e0e0 !important;
            border: 1px solid #444 !important;
        }

        .dark-mode .btn {
            background-color: #444 !important;
            color: #e0e0e0 !important;
            border-color: #666 !important;
        }

        .dark-mode .btn:hover {
            background-color: #222 !important;
            color: #fff !important;
        }

        .dark-mode .logout-btn {
            background-color: #212529 !important;
            color: #fff !important;
            border-color: #212529 !important;
        }

        .dark-mode .logout-btn:hover {
            background-color: #353738 !important;
            color: #fff !important;
        }
    </style>


</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-3 col-lg-2 d-md-block sidebar" style="height: 100vh; background-color: #313A4D;">
                <div class="position-sticky pt-3">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <img src="{{ url_for('static', filename='images/warpnet-logo.png') }}" alt="Logo"
                                class="img-fluid mt-3 mb-3">
                            <hr style="border: 1px solid white; margin-top: 0;">
                        </li>
                        <li class="nav-item">
                            <a class="nav-link active text-white" href="/dash/dashboard">
                                Dashboard
                            </a>
                            <a class="nav-link active text-white" href="/dash/add">
                                Add numberplate
                            </a>
                        </li>
                    </ul>
                    <div class="d-flex justify-content-center mt-3">
                        <a href="{{ url_for('auth.logout') }}" class=" btn btn-sm btn-dark logout-btn"
                            style="width: 200px;">Logout</a>
                        <button id="darkModeToggle" class="btn btn-secondary btn-sm"
                            style="position: fixed; top: 10px; right: 10px; z-index: 9999;">
                            Toggle Theme
                        </button>
                    </div>
                </div>
            </div>

            {%block content%}


            {% endblock %}
        </div>
    </div>
    </div>
    <script>
        document.getElementById('darkModeToggle').onclick = function () {
            document.body.classList.toggle('dark-mode');
            if (document.body.classList.contains('dark-mode')) {
                localStorage.setItem('darkMode', 'enabled');
            } else {
                localStorage.setItem('darkMode', 'disabled');
            }
        };

        if (localStorage.getItem('darkMode') === 'enabled') {
            document.body.classList.add('dark-mode');
        }
    </script>
</body>

</html>