<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LeagueLedger - Pub Quiz Tracking</title>
    
    <!-- Favicon -->

    <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon/favicon-16x16.png">
    <link rel="manifest" href="/static/images/favicon/site.webmanifest">


    <!-- Font Awesome for icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'irish-green': '#006837',
                        'golden-ale': '#FFB400',
                        'cream-white': '#F5F0E1',
                        'black-stout': '#1A1A1A',
                        'guinness-red': '#B22222',
                    },
                    fontFamily: {
                        'garamond': ['Garamond', 'Georgia', 'serif'],
                    }
                }
            }
        }
    </script>
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', path='css/styles.css') }}">
    
    <!-- HTML5 QR Code Scanner library -->
    <script src="https://unpkg.com/html5-qrcode"></script>
    
    {% block extra_head %}{% endblock %}
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
    <!-- Navigation -->
    <nav class="bg-irish-green text-white shadow-md">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <!-- Logo and site name -->
                <div class="flex items-center space-x-2">
                    <a href="/" class="flex items-center">
                        <img src="{{ url_for('static', path='images/logos/monogram.png') }}" alt="LeagueLedger Logo" class="h-12">
                        <span class="ml-2 text-xl font-bold">LeagueLedger</span>
                    </a>
                </div>
                
                <!-- Desktop Navigation -->
                <div class="hidden md:flex space-x-6 items-center">
                    <a href="/" class="hover:text-golden-ale transition">Home</a>
                    <a href="/teams" class="hover:text-golden-ale transition">Teams</a>
                    <a href="/leaderboard" class="hover:text-golden-ale transition">Leaderboard</a>
                    <a href="/dashboard/scan" class="hover:text-golden-ale transition">Scan QR Code</a>
                    
                    {% if user %}
                        <div class="relative dropdown">
                            <button class="dropdown-toggle flex items-center space-x-1 hover:text-golden-ale transition">
                                <i class="fas fa-user-circle text-lg"></i>
                                <span>{{ user.username }}</span>
                                <i class="fas fa-chevron-down text-xs"></i>
                            </button>
                            <div class="dropdown-menu hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50">
                                <a href="/auth/profile" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-user mr-2"></i> Profile
                                </a>
                                <a href="/dashboard" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
                                </a>
                                {% if user.is_admin %}
                                    <a href="/admin" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                        <i class="fas fa-cog mr-2"></i> Admin
                                    </a>
                                {% endif %}
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="/auth/logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
                                    <i class="fas fa-sign-out-alt mr-2"></i> Logout
                                </a>
                            </div>
                        </div>
                    {% else %}
                        <a href="/auth/login" class="bg-golden-ale hover:bg-opacity-90 text-black-stout px-4 py-2 rounded-md transition">Sign In</a>
                    {% endif %}
                </div>
                
                <!-- Mobile menu button -->
                <div class="md:hidden flex items-center space-x-4">
                    <button id="mobile-menu-button" class="text-white hover:text-golden-ale transition">
                        <i class="fas fa-bars text-2xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- Mobile Navigation -->
            <div id="mobile-menu" class="hidden md:hidden mt-3 pb-3 border-t border-irish-green border-opacity-30">
                <div class="flex flex-col space-y-2 mt-3">
                    <a href="/" class="hover:text-golden-ale transition py-2">Home</a>
                    <a href="/teams" class="hover:text-golden-ale transition py-2">Teams</a>
                    <a href="/leaderboard" class="hover:text-golden-ale transition py-2">Leaderboard</a>
                    <a href="/dashboard/scan" class="hover:text-golden-ale transition py-2">Scan QR Code</a>
                    {% if user %}
                        <a href="/auth/profile" class="hover:text-golden-ale transition py-2">Profile</a>
                        <a href="/dashboard" class="hover:text-golden-ale transition py-2">Dashboard</a>
                        {% if user.is_admin %}
                            <a href="/admin" class="hover:text-golden-ale transition py-2">Admin</a>
                        {% endif %}
                        <a href="/auth/logout" class="hover:text-golden-ale transition py-2">Logout</a>
                    {% else %}
                        <a href="/auth/login" class="bg-golden-ale hover:bg-opacity-90 text-black-stout px-4 py-2 rounded-md transition text-center">Sign In</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>
    
    <!-- Main Content -->
    <main class="flex-grow py-6">
        {% block content %}{% endblock %}
    </main>
    
    <!-- Footer -->
    <footer class="bg-black-stout text-cream-white py-8 mt-auto">
        <div class="container mx-auto px-4">
            <div class="flex flex-col md:flex-row justify-between">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center mb-4">
                        <img src="{{ url_for('static', path='images/logos/monogram.png') }}" alt="LeagueLedger Logo" class="h-12">
                        <span class="ml-2 text-xl font-bold">LeagueLedger</span>
                    </div>
                    <p class="text-sm">Track your pub quiz team's progress.<br>Scan QR codes to earn points.</p>
                </div>
                
                <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
                    <div>
                        <h3 class="text-golden-ale font-bold mb-4">Navigation</h3>
                        <ul class="space-y-2">
                            <li><a href="/" class="hover:text-golden-ale transition">Home</a></li>
                            <li><a href="/teams" class="hover:text-golden-ale transition">Teams</a></li>
                            <li><a href="/leaderboard" class="hover:text-golden-ale transition">Leaderboard</a></li>
                            <li><a href="/dashboard/scan" class="hover:text-golden-ale transition">Scan QR Code</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-golden-ale font-bold mb-4">Account</h3>
                        <ul class="space-y-2">
                            <li><a href="/auth/login" class="hover:text-golden-ale transition">Sign In</a></li>
                            <li><a href="/register" class="hover:text-golden-ale transition">Register</a></li>
                            <li><a href="/auth/profile" class="hover:text-golden-ale transition">Profile</a></li>
                            <li><a href="/dashboard" class="hover:text-golden-ale transition">Dashboard</a></li>
                        </ul>
                    </div>
                    
                    <div>
                        <h3 class="text-golden-ale font-bold mb-4">Legal</h3>
                        <ul class="space-y-2">
                            <li><a href="/about" class="hover:text-golden-ale transition">About</a></li>
                            <li><a href="/contact" class="hover:text-golden-ale transition">Contact</a></li>
                            <li><a href="/terms" class="hover:text-golden-ale transition">Terms of Service</a></li>
                            <li><a href="/privacy" class="hover:text-golden-ale transition">Privacy Policy</a></li>
                            <li><a href="/cookies" class="hover:text-golden-ale transition">Cookie Policy</a></li>
                            <li><a href="/impressum" class="hover:text-golden-ale transition">Imprint</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
                <div class="flex items-center space-x-4">
                    <p class="text-sm">&copy; 2025 LeagueLedger. Licensed under Apache License 2.0</p>
                </div>
            </div>
        </div>
    </footer>
    <!-- Custom JavaScript -->
    <script src="{{ url_for('static', path='js/main.js') }}"></script>
    <!-- Mobile menu toggle script -->
    <script>
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });
    </script>
    <!-- Email Protection Script -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Decrypt email addresses
            const emailElements = document.querySelectorAll('.email-protection');
            emailElements.forEach(function(element) {
                const email = element.dataset.email;
                // Create clickable email link
                const link = document.createElement('a');
                link.href = 'mailto:' + email;
                link.textContent = email;
                link.className = element.className;
                // Replace placeholder with actual email link
                element.parentNode.replaceChild(link, element);
            });
        });
    </script>
    {% block extra_scripts %}{% endblock %}
</body>
</html>