<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ anime_info.title or 'Anime Details' }} | AnimeHub</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">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
        body { font-family: 'Inter', sans-serif; background: #0f172a; color: #f8fafc; }
    </style>
</head>
<body class="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900">
    <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">
                <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">AnimeHub</span>
                </a>
            </div>
        </div>
    </nav>
    <main class="max-w-3xl mx-auto px-4 py-10">
        <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>
        <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 aspect-[2/3] rounded-lg overflow-hidden bg-dark flex items-center justify-center">
                {% if anime_image %}
                <img src="{{ anime_image }}" alt="{{ anime_info.title }}" class="w-full h-full object-cover">
                {% else %}
                <div class="w-full h-full flex items-center justify-center text-gray-400">No Image</div>
                {% endif %}
            </div>
            <div class="flex-1 flex flex-col justify-between">
                <div>
                    <h1 class="text-3xl font-bold mb-2">{{ anime_info.title }}</h1>
                    <div class="flex flex-wrap gap-2 mb-2">
                        {% if anime_info.type %}<span class="bg-primary text-white text-xs px-2 py-1 rounded">{{ anime_info.type }}</span>{% endif %}
                        {% if anime_info.status %}<span class="bg-accent text-white text-xs px-2 py-1 rounded">{{ anime_info.status }}</span>{% endif %}
                        {% if anime_info.episodes %}<span class="bg-dark text-white text-xs px-2 py-1 rounded">{{ anime_info.episodes }} eps</span>{% endif %}
                        {% if anime_info.score %}<span class="bg-yellow-500 text-white text-xs px-2 py-1 rounded"><i class="fas fa-star mr-1"></i>{{ anime_info.score }}</span>{% endif %}
                    </div>
                    <div class="mb-3 text-sm text-gray-300">
                        {% if anime_info.aired and anime_info.aired.string %}
                        <span class="mr-2"><i class="fas fa-calendar-alt mr-1"></i>{{ anime_info.aired.string }}</span>
                        {% endif %}
                        {% if anime_info.studios %}
                        <span class="mr-2"><i class="fas fa-building mr-1"></i>
                            {% for studio in anime_info.studios %}{{ studio.name }}{% if not loop.last %}, {% endif %}{% endfor %}
                        </span>
                        {% endif %}
                        {% if anime_info.season and anime_info.year %}
                        <span class="mr-2"><i class="fas fa-leaf mr-1"></i>{{ anime_info.season|capitalize }} {{ anime_info.year }}</span>
                        {% endif %}
                    </div>
                    {% if anime_info.genres %}
                    <div class="mb-2 flex flex-wrap gap-2">
                        {% for genre in anime_info.genres %}
                        <span class="bg-dark text-xs px-2 py-1 rounded-full">{{ genre.name }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}
                    <p class="text-gray-200 text-base leading-relaxed mt-2">{{ anime_info.synopsis }}</p>
                </div>
                <div class="mt-4">
                    {% if anime_info.url %}
                    <a href="{{ anime_info.url }}" target="_blank" class="inline-block bg-primary hover:bg-blue-600 text-white px-5 py-2 rounded-lg font-medium transition">View on MyAnimeList</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </main>
</body>
</html> 