<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
    <title>{% block title %}ScanLook{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/mobile.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='css/scanner.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    {% block extra_css %}{% endblock %}
</head>
<body>
    {% if session.user_id %}
    <nav class="navbar">
        <div class="nav-content">
            <div class="nav-left">
                <a href="{{ url_for('home') }}" class="logo">
                    <span class="logo-scan">SCAN</span><span class="logo-look">LOOK</span>
                </a>
            </div>
            <div class="nav-right">
                <span class="user-badge">{{ session.full_name }} <span class="role-pill">{{ session.role }}</span></span>
                {% if session.role in ['owner', 'admin'] %}
                <div class="settings-dropdown">
                    <button class="btn-settings" onclick="toggleSettings()">⚙️</button>
                    <div id="settingsMenu" class="settings-menu">
                        <a href="{{ url_for('admin_dashboard') }}" class="settings-item">
                            <span class="settings-icon"><i class="fas fa-gauge"></i></span> Admin Dashboard
                        </a>
                        <a href="{{ url_for('users.manage_users') }}" class="settings-item">
                            <span class="settings-icon"><i class="fas fa-users"></i></span> Manage Users
                        </a>
                        <a href="{{ url_for('module_manager_ui') }}" class="settings-item">
                            <span class="settings-icon"><i class="fas fa-puzzle-piece"></i></span> Module Manager
                        </a>
                    </div>
                </div>
                {% endif %}
                <a href="{{ url_for('logout') }}" class="btn-logout">Logout</a>
            </div>
        </div>
    </nav>
    {% endif %}

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <div class="flash-container">
                {% for category, message in messages %}
                    <div class="flash flash-{{ category }}">
                        <span class="flash-icon">
                            {% if category == 'success' %}✓{% elif category == 'danger' %}✕{% elif category == 'warning' %}⚠{% else %}ℹ{% endif %}
                        </span>
                        <span class="flash-message">{{ message }}</span>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <main class="main-content">
        {% block content %}{% endblock %}
    </main>

    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    {% block extra_js %}{% endblock %}
</body>
<footer class="footer">
    <div class="footer-content">
        <p>&copy; 2026 Javier Torres. All Rights Reserved.</p>
        <p class="text-muted"><small>v{{ version }}</small></p>
    </div>
 
</footer>
</html>
