<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    {% block supertitle %}{% endblock %}
    <title>Domain Logon Monitor - {% block title %}{% endblock %}</title>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/custom.css') }}" rel="stylesheet">
    <link rel="shortcut icon" href="{{ url_for('static', filename='img/favicon.png') }}">
    {% block head %}{% endblock %}
    <style>
        .theme-icon {
            width: 1em;
            height: 1em;
            display: none;
        }
        [data-bs-theme="dark"] .theme-icon-dark {
            display: inline;
        }
        [data-bs-theme="light"] .theme-icon-light {
            display: inline;
        }
        .dark-theme {
            background-color: #212529;
            color: #f8f9fa;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="{{ url_for('frontend.index') }}">
                <img src="{{ url_for('static', filename='img/favicon.png') }}" style="width: 30px;">
                <!-- Performance icons created by Uniconlabs - Flaticon ( www.flaticon.com/free-icons/performance) -->
                Domain Logon Monitor</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    {% if current_user.is_authenticated %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="dashboardDropdown" role="button" data-bs-toggle="dropdown">
                                Dashboard
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('frontend.dashboard') }}">Login Events</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('frontend.time_spent_report') }}">Time Spent Report</a></li>
                            </ul>
                        </li>
                        {% if current_user.role == 'Admin' %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.manage_users') }}">Manage Users</a>
                        </li>
                        {% endif %}
                        {% if current_user.role == 'GlobalAdmin' %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="adminDropdown" role="button" data-bs-toggle="dropdown">
                                Admin
                            </a>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{{ url_for('auth.manage_users') }}">Manage Users</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('auth.manage_companies') }}">Companies</a></li>
                                <li><a class="dropdown-item" href="{{ url_for('auth.admin_settings') }}">Settings</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item" href="{{ url_for('auth.view_error_logs') }}">Error Logs</a></li>
                            </ul>
                        </li>
                        {% endif %}
                        
                        {# Companies dropdown for users who belong to multiple companies or company admins #}
                        {% if current_user.companies|length > 0 %}
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="companyDropdown" role="button" data-bs-toggle="dropdown">
                                Companies
                            </a>
                            <ul class="dropdown-menu">
                                {% for uc in current_user.companies %}
                                    <li>
                                        <a class="dropdown-item" href="{{ url_for('frontend.dashboard', company_id=uc.company.id) }}">
                                            {{ uc.company.name }}
                                        </a>
                                    </li>
                                    {% if uc.role == 'CompanyAdmin' %}
                                    <li>
                                        <a class="dropdown-item ps-4" href="{{ url_for('auth.company_users', company_id=uc.company.id) }}">
                                            <small>Manage Users</small>
                                        </a>
                                    </li>
                                    <li>
                                        <a class="dropdown-item ps-4" href="{{ url_for('auth.company_api_keys', company_id=uc.company.id) }}">
                                            <small>Sites (API Key)</small>
                                        </a>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    {% endif %}
                                {% endfor %}
                            </ul>
                        </li>
                        {% endif %}
                        
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.profile') }}">Profile</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
                        </li>
                    {% else %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.login') }}">Login</a>
                        </li>
                        {% if allow_registration %}
                        <li class="nav-item">
                            <a class="nav-link" href="{{ url_for('auth.register') }}">Register</a>
                        </li>
                        {% endif %}
                    {% endif %}
                    <li class="nav-item">
                        <button class="btn btn-link nav-link" id="theme-toggle">
                            <svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
                            </svg>
                            <svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
                            </svg>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main>
        <div class="container">
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} mt-3">
                            {{ message }}
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
            {% block content %}{% endblock %}
        </div>
    </main>

    <script src="{{ url_for('static', filename='js/jquery-3.6.0.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.bundle.min.js') }}"></script>
    {% block scripts %}{% endblock %}
    <script>
        // Theme toggler
        document.addEventListener('DOMContentLoaded', function() {
            const themeToggle = document.getElementById('theme-toggle');
            const storedTheme = localStorage.getItem('theme') || 'dark';
            document.documentElement.setAttribute('data-bs-theme', storedTheme);
            
            themeToggle.addEventListener('click', () => {
                const currentTheme = document.documentElement.getAttribute('data-bs-theme');
                const newTheme = currentTheme === 'light' ? 'dark' : 'light';
                document.documentElement.setAttribute('data-bs-theme', newTheme);
                localStorage.setItem('theme', newTheme);
            });
        });
    </script>
</body>
<!-- <a href="https://www.flaticon.com/free-icons/performance" title="performance icons">Performance icons created by Uniconlabs - Flaticon</a> -->
</html>
