<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://cdn.tailwindcss.com 'nonce-{{ nonce }}'; style-src 'self' https://fonts.googleapis.com 'nonce-{{ nonce }}'; font-src https://fonts.gstatic.com; img-src 'self' data:; base-uri 'self'; form-action 'self'">
    <title>{{ title }}</title>
    <script src="https://cdn.tailwindcss.com/3.4.17" integrity="sha384-igm5BeiBt36UU4gqwWS7imYmelpTsZlQ45FZf+XBn9MuJbn4nQr7yx1yFydocC/K" crossorigin="anonymous"></script>
    <script nonce="{{ nonce }}">
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    animation: {
                        'gradient': 'gradient 15s ease infinite',
                    },
                    keyframes: {
                        gradient: {
                            '0%, 100%': { backgroundPosition: '0% 50%' },
                            '50%': { backgroundPosition: '100% 50%' },
                        }
                    }
                }
            }
        }
    </script>
    <style nonce="{{ nonce }}">
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

        body {
            font-family: 'Inter', sans-serif;
        }

        .link-card {
            /* Animation removed as requested */
        }

        .gradient-text {
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient(to right, #6366f1, #8b5cf6, #d946ef);
        }

        /* Light mode styles */
        html:not(.dark) body {
            background-color: #f9fafb;
            color: #1f2937;
        }

        html:not(.dark) .theme-container {
            background: linear-gradient(to bottom right, #f3f4f6, #e5e7eb, #f3f4f6);
        }

        html:not(.dark) .content-container {
            background-color: rgba(255, 255, 255, 0.8);
            border-color: #e5e7eb;
        }

        html:not(.dark) .link-card a {
            background-color: rgba(243, 244, 246, 0.5);
            border-color: #e5e7eb;
        }

        html:not(.dark) .link-card a:hover {
            background-color: rgba(249, 250, 251, 0.5);
            border-color: #6366f1;
        }

        html:not(.dark) .card-title {
            color: #1f2937;
        }

        html:not(.dark) .card-url {
            color: #6b7280;
        }

        html:not(.dark) .footer-border {
            border-color: #e5e7eb;
        }

        html:not(.dark) .footer-text {
            color: #6b7280;
        }
    </style>
    <script nonce="{{ nonce }}">
        // Check for saved theme preference or use default (dark)
        document.addEventListener('DOMContentLoaded', () => {
            const theme = localStorage.getItem('theme') || 'dark';
            document.documentElement.className = theme;

            // Update toggle button appearance
            updateToggleButton();

            // Add click handler for theme toggle button
            const themeToggleBtn = document.getElementById('theme-toggle-btn');
            if (themeToggleBtn) {
                themeToggleBtn.addEventListener('click', toggleTheme);
            }
        });

        // Toggle between dark and light themes
        function toggleTheme() {
            const html = document.documentElement;
            const newTheme = html.classList.contains('dark') ? '' : 'dark';

            html.className = newTheme;
            localStorage.setItem('theme', newTheme);

            // Update toggle button appearance
            updateToggleButton();
        }

        // Update toggle button icon based on current theme
        function updateToggleButton() {
            const isDark = document.documentElement.classList.contains('dark');
            const sunIcon = document.getElementById('sun-icon');
            const moonIcon = document.getElementById('moon-icon');

            if (isDark) {
                sunIcon.classList.remove('hidden');
                moonIcon.classList.add('hidden');
            } else {
                sunIcon.classList.add('hidden');
                moonIcon.classList.remove('hidden');
            }
        }
    </script>
</head>
<body class="dark:bg-black dark:text-gray-200 text-gray-800 font-sans leading-normal tracking-normal min-h-screen">
    <div class="theme-container dark:bg-gradient-to-br dark:from-gray-900 dark:via-gray-800 dark:to-gray-900 min-h-screen py-12 px-4 sm:px-6 dark:animate-gradient dark:bg-[length:200%_200%]">
        <div class="content-container container max-w-4xl mx-auto backdrop-blur-sm dark:bg-black/30 rounded-xl shadow-2xl p-8 border dark:border-gray-800">
            <div class="flex items-center justify-between mb-8">
                <div>
                    <h1 class="text-4xl font-bold mb-2 gradient-text">{{ title }}</h1>
                    {% if description %}
                    <div class="dark:text-gray-400 text-gray-600 italic">{{ description }}</div>
                    {% endif %}
                </div>
                <div class="flex items-center space-x-4">
                    <button id="theme-toggle-btn" class="flex items-center px-3 py-2 rounded-lg dark:bg-gray-800 bg-gray-200 border dark:border-gray-700 border-gray-300 hover:border-indigo-500 dark:hover:bg-gray-700 hover:bg-gray-300 transition-all duration-300 shadow-md">
                        <!-- Sun icon for dark mode (shows when in dark mode) -->
                        <svg id="sun-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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>
                        <!-- Moon icon for light mode (shows when in light mode) -->
                        <svg id="moon-icon" xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-indigo-600 hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <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>
                        <span class="dark:text-white text-gray-800 text-sm font-medium">Toggle Theme</span>
                    </button>
                    <a href="{{ repository_url }}" target="_blank" class="flex items-center px-3 py-2 rounded-lg dark:bg-gray-800 bg-gray-200 border dark:border-gray-700 border-gray-300 hover:border-indigo-500 dark:hover:bg-gray-700 hover:bg-gray-300 transition-all duration-300 shadow-md">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 dark:text-indigo-400 text-indigo-600" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
                        </svg>
                        <span class="dark:text-white text-gray-800 text-sm font-medium">Home Repo</span>
                    </a>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-8">
                {% for name, url in links %}
                <div class="link-card group">
                    <a href="{{ url }}" target="_blank" class="block p-4 rounded-lg dark:bg-gray-800/50 bg-gray-100/80 border dark:border-gray-700 border-gray-300 dark:hover:border-indigo-500 hover:border-indigo-500 dark:hover:bg-gray-700/50 hover:bg-gray-200/80">
                        <div class="flex items-center">
                            <div class="flex-shrink-0 w-10 h-10 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 flex items-center justify-center mr-4 group-hover:from-purple-600 group-hover:to-pink-600 transition-all duration-300">
                                <span class="text-white font-bold">{{ name[0] | upper }}</span>
                            </div>
                            <div>
                                <h3 class="card-title text-lg font-medium dark:text-white text-gray-800 dark:group-hover:text-indigo-300 group-hover:text-indigo-600 transition-colors duration-200">{{ name }}</h3>
                                <p class="card-url text-xs dark:text-gray-400 text-gray-500 truncate">{{ url }}</p>
                            </div>
                        </div>
                    </a>
                </div>
                {% endfor %}
            </div>

            <div class="mt-12 pt-6 border-t footer-border dark:border-gray-800 border-gray-300 text-center">
                <div class="footer-text dark:text-gray-500 text-gray-600 text-sm mb-2">
                    Generated by <a href="https://pypi.org/project/minibook/" class="dark:text-indigo-400 text-indigo-600 dark:hover:text-indigo-300 hover:text-indigo-500 transition-colors duration-200">MiniBook</a> on {{ timestamp }}
                </div>
                <div class="flex items-center justify-center space-x-2 mb-2">
                    <span class="footer-text dark:text-gray-500 text-gray-600">A product by</span>
                    <a href="https://jqr.ae" class="dark:text-indigo-400 text-indigo-600 dark:hover:text-indigo-300 hover:text-indigo-500 transition-colors duration-200 font-medium flex items-center">
                        jqr
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
                <div class="flex items-center justify-center">
                    <a href="https://pypi.org/project/minibook/" class="dark:text-indigo-400 text-indigo-600 dark:hover:text-indigo-300 hover:text-indigo-500 transition-colors duration-200 font-medium flex items-center">
                        PyPI Package
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
