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

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{web_info.site_name}}</title>
        <link rel="preload" href="{{ url_for('static', filename='fonts/Lato-Medium.woff2') }}" as="font"
            type="font/woff2" crossorigin="anonymous">
        <link rel="preload" href="{{ url_for('static', filename='fonts/Lato-Black.woff2') }}" as="font"
            type="font/woff2" crossorigin="anonymous">
        {% block font_preloads %}{% endblock %}

        <!-- Custom Stylesheet and js-->
        <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">

        <script>
            // This code should be added to <head>.
            // It's used to prevent page load glitches.
            const html = document.documentElement;
            const theme = localStorage.getItem('hs_theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            if (theme === 'dark' || (theme === 'auto' && prefersDark)) {
                html.classList.add('dark');
            } else {
                html.classList.remove('dark');
            }
        </script>
    </head>

    <body
        class="font-lato font-medium min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
        <header>
            <nav
                class="bg-white/80 dark:bg-gray-800/60 backdrop-blur-md w-full z-20 top-0 start-0 border-b border-gray-200 dark:border-gray-600 shadow-md">
                <div class="max-w-screen-xl flex flex-wrap items-end justify-between mx-auto p-2.5">
                    <!-- Logo and Desktop Nav -->
                    <div class="flex items-end space-x-4 rtl:space-x-reverse">
                        <a href="{{ url_for('blog.home') }}" class="flex items-center space-x-3 rtl:space-x-reverse">
                            <span
                                class="self-center text-2xl font-black whitespace-nowrap dark:text-white dark:hover:text-amber-400 hover:text-amber-900">{{web_info.site_name}}</span>
                        </a>
                        <!-- Desktop nav links -->
                        <ul class="hidden md:flex flex-row space-x-6 font-medium">
                            <li><a href="{{ url_for('blog.collection') }}"
                                    class="nav-link text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">Collection</a>
                            </li>
                            <li><a href="#about"
                                    class="nav-link text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">About</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Right Side -->
                    <div class="flex items-center space-x-4">
                        <!-- Dark mode toggle -->
                        <button id="darkSwitch" type="button"
                            class="flex items-center justify-center w-6 h-6 rounded-full bg-gray-200 dark:bg-gray-700 transition-colors duration-300 hover:bg-gray-300 dark:hover:bg-neutral-600">
                            <svg id="themeIconSun" xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5 text-yellow-500 dark:hidden" fill="none" viewBox="0 0 24 24"
                                stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 3v1m0 16v1m9-9h1M4 12H3m15.364-6.364l.707.707M6.343 17.657l-.707.707M17.657 17.657l-.707-.707M6.343 6.343l-.707-.707M12 8a4 4 0 100 8 4 4 0 000-8z" />
                            </svg>
                            <svg id="themeIconMoon" xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5 text-white hidden dark:inline-block" viewBox="0 0 20 20"
                                fill="currentColor">
                                <path d="M17.293 13.293A8 8 0 116.707 2.707a8.001 8.001 0 0010.586 10.586z" />
                            </svg>
                        </button>

                        <!-- User dropdown -->
                        {% if g.user %}
                        <button id="userMenuButton" class="nav-link">
                            <span>{{ g.user['username'] }}</span>
                        </button>
                        {% else %}
                        <a href="{{ url_for('auth.login') }}"
                            class="nav-link text-gray-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400">Log
                            In</a>
                        {% endif %}

                        <!-- Hamburger -->
                        <button data-collapse-toggle="navbar-menu" type="button"
                            class="inline-flex items-end p-2 w-10 h-8 justify-end text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none dark:text-gray-400 dark:hover:bg-gray-700"
                            aria-controls="navbar-menu" aria-expanded="false">
                            <span class="sr-only">Open main menu</span>
                            <svg class="w-6 h-4" aria-hidden="true" fill="none" viewBox="0 0 17 14">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                    stroke-width="2" d="M1 1h15M1 7h15M1 13h15" />
                            </svg>
                        </button>

                    </div>

                    <!-- Mobile dropdown -->
                    <div class="hidden w-full md:hidden mt-4" id="navbar-menu">
                        <ul
                            class="flex flex-col space-y-2 font-medium bg-white dark:bg-gray-900 p-4 rounded-lg border dark:border-gray-700">
                            <li><a href="{{ url_for('blog.collection') }}" class="nav-link">Collection</a>
                            </li>
                            <li><a href="#about" class="nav-link">About</a>
                            </li>
                        </ul>
                    </div>

                    <!-- Mobile dropdown -->
                    <div class="hidden w-full mt-4" id="user-menu">
                        <ul
                            class="flex flex-col space-y-2 font-medium bg-white dark:bg-gray-900 p-4 rounded-lg border dark:border-gray-700">
                            <li><a href="{{ url_for('blog.new_image') }}" class="nav-link">New
                                    Post</a>
                            </li>
                            <li><a href="{{ url_for('private.profile') }}" class="nav-link">My
                                    Profile</a>
                            </li>
                            <li>
                                <form method="post" action="{{ url_for('auth.logout') }}">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" class="text-red-600 dark:text-red-400 nav-link">Log Out</button>
                                </form>
                            </li>
                        </ul>
                    </div>

                </div>
            </nav>
        </header>

        <main class="flex-1">
            <div class="bg-cover bg-center">
                {% with messages = get_flashed_messages() %}
                {% if messages %}
                <div class="bg-blue-100 border border-blue-300 text-blue-800 px-4 py-3 rounded mb-4">
                    {{ messages[0] }}
                </div>
                {% endif %}
                {% endwith %}

                {% block content %}
                {% endblock %}
            </div>
        </main>
        <!-- Footer -->
        <footer class="text-black bg-white/80 py-3 text-center dark:bg-gray-800/60 dark:text-white shrink-0 shadow-md">
            <p>&copy; 2026 {{WebName}}. All rights reserved.</p>
        </footer>

    </body>
    <script>
        const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
        const themeToggle = document.getElementById('darkSwitch');

        themeToggle.addEventListener('click', () => {
            const html = document.documentElement;
            const isDark = html.classList.toggle('dark');
            localStorage.setItem('hs_theme', isDark ? 'dark' : 'light');
        });

        // Set initial theme from localStorage
        if (localStorage.getItem('hs_theme') === 'dark') {
            document.documentElement.classList.add('dark');
        }
        ;

        const navLinksStyle = document.querySelectorAll('.nav-link');

        navLinksStyle.forEach(link => {
            link.classList.add(
                'text-white-900',
                'dark:text-gray-200',
                'hover:text-blue-500',
                'transition-colors',
                'duration-300'
            );
        });

        document.addEventListener('DOMContentLoaded', () => {
            const userBtn = document.getElementById('userMenuButton');
            const userMenu = document.getElementById('user-menu');
            const toggleBtn = document.querySelector('[data-collapse-toggle="navbar-menu"]');
            const navMenu = document.getElementById('navbar-menu');

            // Toggle user menu
            document.addEventListener('click', function (event) {
                const isUserButtonClick = userBtn && userBtn.contains(event.target);
                const isUserMenuClick = userMenu && userMenu.contains(event.target);
                const isNavbarToggleClick = toggleBtn && toggleBtn.contains(event.target);

                if (isUserButtonClick) {
                    // Hide navbar menu if open
                    if (navMenu && !navMenu.classList.contains('hidden')) {
                        navMenu.classList.add('hidden');
                    }
                    // Toggle user menu
                    userMenu.classList.toggle('hidden');
                } else if (!isUserMenuClick && !isNavbarToggleClick) {
                    // Clicked outside both menus
                    if (userMenu) userMenu.classList.add('hidden');
                }
            });

            // Toggle navbar menu
            toggleBtn?.addEventListener('click', () => {
                // Hide user menu if visible
                if (userMenu && !userMenu.classList.contains('hidden')) {
                    userMenu.classList.add('hidden');
                }
                // Toggle nav menu
                navMenu?.classList.toggle('hidden');
            });
        });
    </script>

</html>
