<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Review Hound{% endblock %}</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = { darkMode: 'class' }
    </script>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
    <script>
    (function() {
      const stored = localStorage.getItem('theme');
      if (stored === 'dark' || (!stored && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      }
    })();
    </script>
</head>
<body class="bg-[var(--bg-page)] min-h-screen flex flex-col">
    <nav class="bg-[var(--bg-surface)] border-b border-[var(--border)] sticky top-0 z-40">
        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
            <a href="{{ url_for('main.dashboard') }}" class="text-xl font-semibold text-[var(--text-primary)]">Review Hound</a>
            <div class="flex items-center space-x-6">
                <a href="{{ url_for('main.dashboard') }}" class="text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors">Dashboard</a>
                <a href="{{ url_for('main.settings') }}" class="text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors">Settings</a>
                <a href="{{ url_for('main.welcome') }}" class="text-gray-600 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400 font-medium transition-colors">Guide</a>
                <button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors" title="Toggle theme">
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
                    </svg>
                    <svg class="w-5 h-5 text-gray-600 dark:text-gray-300 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                    </svg>
                </button>
            </div>
        </div>
    </nav>

    <main class="container mx-auto px-6 py-8 flex-1">
        {% block content %}{% endblock %}
    </main>

    <footer class="bg-[var(--bg-surface)] border-t border-[var(--border)] py-6 mt-auto">
        <div class="container mx-auto text-center text-sm text-[var(--text-muted)]">
            Review Hound
        </div>
    </footer>

    <script>
    document.getElementById('theme-toggle').addEventListener('click', function() {
      const isDark = document.documentElement.classList.toggle('dark');
      localStorage.setItem('theme', isDark ? 'dark' : 'light');
    });
    </script>
</body>
</html>
