<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ anime_title }} - AnimeFlix</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#1E293B',
                        accent: '#F43F5E',
                        dark: '#0F172A',
                        light: '#F8FAFC',
                    },
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; background-color: #0F172A; color: #F8FAFC; }
        .anime-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
        .anime-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.3); }
    </style>
</head>
<body class="min-h-screen">
    <!-- Navigation -->
    <nav class="bg-secondary/80 backdrop-blur-md sticky top-0 z-50 border-b border-gray-700">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <a href="/" class="flex items-center">
                            <i class="fas fa-play-circle text-accent text-2xl mr-2"></i>
                            <span class="text-xl font-bold text-white">AnimeFlix</span>
                        </a>
                    </div>
                </div>
                <div class="hidden md:block">
                    <form method="get" action="/search" class="ml-4 flex items-center md:ml-6">
                        <div class="relative">
                            <input type="text" name="q" placeholder="Search anime..." class="bg-dark text-white px-4 py-2 rounded-full w-64 focus:outline-none focus:ring-2 focus:ring-primary">
                            <button class="absolute right-3 top-2 text-gray-400 hover:text-white">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </nav>
    <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <a href="/" class="text-primary hover:underline flex items-center mb-6"><i class="fas fa-arrow-left mr-2"></i>Back to Home</a>
        <!-- Anime Details Card -->
        <div class="flex flex-col md:flex-row gap-8 bg-secondary rounded-xl shadow-lg p-6 mb-10">
            <div class="flex-shrink-0 w-full md:w-64 lg:w-80 aspect-[2/3] rounded-lg overflow-hidden bg-dark flex items-center justify-center">
                {% if anime_image %}
                <img src="{{ anime_image }}" alt="{{ anime_title }}" class="w-full h-full object-cover">
                {% else %}
                <div class="w-full h-full flex items-center justify-center text-gray-500">No Image</div>
                {% endif %}
            </div>
            <div class="flex-1 flex flex-col justify-between">
                <div>
                    <h1 class="text-3xl font-bold mb-2">{{ anime_title }}</h1>
                    {% if anime_info.synopsis %}
                    <p class="text-gray-300 mb-4">{{ anime_info.synopsis }}</p>
                    {% endif %}
                    <div class="flex flex-wrap gap-2 mb-3">
                        {% if anime_info.type %}<span class="bg-dark text-xs px-2 py-1 rounded-full">{{ anime_info.type }}</span>{% endif %}
                        {% if anime_info.status %}<span class="bg-dark text-xs px-2 py-1 rounded-full">{{ anime_info.status }}</span>{% endif %}
                        {% if anime_info.episodes %}<span class="bg-dark text-xs px-2 py-1 rounded-full">Episodes: {{ anime_info.episodes }}</span>{% endif %}
                        {% if anime_info.score %}<span class="bg-primary text-xs px-2 py-1 rounded-full">Score: {{ anime_info.score }}</span>{% endif %}
                    </div>
                    {% if anime_info.genres %}
                    <div class="flex flex-wrap gap-2 mb-2">
                        {% for genre in anime_info.genres %}
                        <span class="bg-accent text-white text-xs px-2 py-1 rounded-full">{{ genre.name }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% if anime_info.studios %}
                    <div class="flex flex-wrap gap-2 mb-2">
                        <span class="text-gray-400 text-xs">Studios:</span>
                        {% for studio in anime_info.studios %}
                        <span class="bg-dark text-xs px-2 py-1 rounded-full">{{ studio.name }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    {% if anime_info.aired and anime_info.aired.string %}
                    <div class="text-xs text-gray-400 mt-2">Aired: {{ anime_info.aired.string }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        <!-- Episodes Grid -->
        <h2 class="text-2xl font-bold mb-6">Episodes</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            {% for ep in episodes %}
            <div class="anime-card bg-secondary rounded-lg overflow-hidden shadow-md flex flex-col">
                <a href="/anime/{{ anime_session }}/{{ ep.session }}">
                    <div class="relative">
                        <img src="/proxy-image?url={{ ep.snapshot | urlencode }}" alt="Episode {{ ep.episode }}" class="w-full h-48 object-cover">
                        <div class="absolute bottom-2 left-2 bg-primary text-white text-xs px-2 py-1 rounded">EP {{ ep.episode }}</div>
                        {% if ep.fansub %}<div class="absolute top-2 right-2 bg-accent text-white text-xs px-2 py-1 rounded">{{ ep.fansub }}</div>{% endif %}
                    </div>
                    <div class="p-3">
                        <h3 class="font-medium text-white truncate">Episode {{ ep.episode }}</h3>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-clock text-gray-400 text-xs mr-1"></i>
                            <span class="text-xs text-gray-300">{{ ep.duration }}</span>
                        </div>
                    </div>
                </a>
            </div>
            {% endfor %}
        </div>
        <!-- Pagination -->
        <div class="pagination text-center mt-8">
            {% if page > 1 %}
                <a href="/anime/{{ anime_session }}?page={{ page - 1 }}" class="page-btn inline-block bg-secondary text-primary px-4 py-2 rounded mr-2">&laquo; Previous</a>
            {% endif %}
            <span class="text-white">Page {{ page }} of {{ last_page }}</span>
            {% if page < last_page %}
                <a href="/anime/{{ anime_session }}?page={{ page + 1 }}" class="page-btn inline-block bg-secondary text-primary px-4 py-2 rounded ml-2">Next &raquo;</a>
            {% endif %}
        </div>
    </main>
</body>
</html>
