<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    {% if theme == 'dark' %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/dark_theme.css') }}">
    {% elif theme == 'modern' %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/modern_theme.css') }}">
    {% elif theme == 'vampire' %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/vampire_theme.css') }}">
    {% elif theme == 'nordic' %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/nordic_theme.css') }}">
    {% elif theme == 'halloween' %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/halloween_theme.css') }}">
    {% else %}
        <link rel="stylesheet" href="{{ url_for('static', filename='css/light_theme.css') }}">
    {% endif %}
</head>
<body>
    <header>
        <!-- Burger icon for smaller screens -->
        <div class="burger" onclick="toggleMenu()">
            <div></div>
            <div></div>
            <div></div>
        </div>
        
        <!-- Navigation menu -->
        <nav class="nav-links">
            <!-- Centered Links -->
            <div class="nav-center">
                <a href="/">Home</a>
                <div class="dropdown">
                    <a href="/methodology">Methodology</a>
                    <div class="dropdown-content">
                        <a href="/windows">Windows</a>
                        <a href="/linux">Linux</a>
                    </div>
                </div>
                <div class="dropdown">
                    <a href="/investigate">Investigate</a>
                    <div class="dropdown-content">
                        <a href="/investigate/threat">Threat Intel</a>
                        <a href="/investigate/ip">IP</a>
                        <a href="/investigate/domain">Domain</a>
                        <a href="/investigate/filehash">File Hash</a>
                        <a href="/investigate/malware">Malware</a>
                    </div>
                </div>
                <a href="/rule_creation">Rule Creation</a>
            </div>
        
            <!-- Right-Aligned Links -->
            <div class="nav-right">
                {% if current_user.is_authenticated %}
                    <a href="/notebook">Notebook</a>
                    <a href="/profile">{{ current_user.username }}</a>
                {% else %}
                    <a href="/register">Register</a>
                    <a href="/login">Login</a>
                {% endif %}
            </div>
        </nav>
        
        

        <!-- Theme Toggle Slider -->
        <label class="switch">
            <input type="checkbox" id="theme-toggle">
            <span class="slider"></span>
        </label>
    </header>

    <div class="tip">
        {{ random_tip }}
    </div>

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

    <script>
        // Theme toggle functionality
        const themeToggle = document.getElementById('theme-toggle');
        const themeStylesheet = document.getElementById('theme-stylesheet');
        const body = document.body;

        // Check for stored theme in localStorage
        if (localStorage.getItem('theme') === 'light') {
            themeToggle.checked = true;
            body.classList.add('light-theme');
            body.classList.remove('dark-theme');
            themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
        } else {
            themeToggle.checked = false;
            body.classList.add('dark-theme');
            body.classList.remove('light-theme');
            themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
        }

        // Event listener for theme toggle
        themeToggle.addEventListener('change', function() {
            if (this.checked) {
                body.classList.remove('dark-theme');
                body.classList.add('light-theme');
                themeStylesheet.href = '{{ url_for("static", filename="css/light_theme.css") }}';
                localStorage.setItem('theme', 'light');
            } else {
                body.classList.remove('light-theme');
                body.classList.add('dark-theme');
                themeStylesheet.href = '{{ url_for("static", filename="css/dark_theme.css") }}';
                localStorage.setItem('theme', 'dark');
            }
        });

        const navLinks = document.querySelectorAll('.nav-links a');

        navLinks.forEach(link => {
            link.addEventListener('click', function() {
                // Remove active class from all links
                navLinks.forEach(link => link.classList.remove('active'));

                // Add active class to clicked link
                this.classList.add('active');
            });
        });

        // Burger menu toggle function for mobile
        function toggleMenu() {
            const navLinks = document.querySelector('.nav-links');
            navLinks.classList.toggle('active');
        }
    </script>
</body>
</html>
