<div class="card bg-base-200 border border-primary/30 mt-8" x-data="{ view: 'grid' }">
    <!-- Header -->
    <div class="card-body p-6">
        <div class="flex justify-between items-center">
            <div class="flex items-center gap-3">
                <h2 class="text-xl font-bold border-none p-0 m-0">{{ anime_title }}</h2>
                <span class="badge badge-outline">{{ episodes|length }} épisodes disponibles</span>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-circle btn-sm btn-ghost" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
                    <i class="fas fa-th"></i>
                </button>
                <button class="btn btn-circle btn-sm btn-ghost" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
                    <i class="fas fa-list"></i>
                </button>
                <button class="btn btn-circle btn-sm btn-error" onclick="document.getElementById('player-container').innerHTML = ''">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>

        <!-- Video player display area -->
        <div id="video-player-display" x-ref="playerArea"></div>

        <!-- Episodes content -->
        {% if episodes %}
            <!-- Grid View -->
            <div x-show="view === 'grid'" x-transition class="mt-6">
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 lg:grid-cols-7 gap-3">
                    {% for ep in episodes %}
                        <div class="bg-base-300 rounded-lg p-4 text-center hover:bg-base-100 transition-colors border border-transparent hover:border-primary flex flex-col gap-2">
                            <div class="text-primary font-bold text-xl">EP {{ ep.episode_number or loop.index }}</div>
                            <button class="btn btn-xs btn-primary w-full" 
                                    hx-get="/api/player/embed?url={{ ep.url | urlencode }}" 
                                    hx-target="#video-player-display"
                                    hx-swap="innerHTML"
                                    onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
                                <i class="fas fa-play"></i> Regarder
                            </button>
                            <button class="btn btn-xs btn-ghost w-full"
                                    hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
                                    hx-swap="none"
                                    title="Télécharger cet épisode">
                                <i class="fas fa-download"></i> Télécharger
                            </button>
                        </div>
                    {% endfor %}
                </div>
            </div>

            <!-- List View -->
            <div x-show="view === 'list'" x-transition class="mt-6">
                <div class="flex flex-col gap-2">
                    {% for ep in episodes %}
                        <div class="flex items-center gap-4 bg-base-300 rounded-lg px-4 py-3 hover:bg-base-100 transition-colors">
                            <span class="font-bold text-primary w-12 shrink-0">EP {{ ep.episode_number or loop.index }}</span>
                            <span class="flex-1 truncate text-base-content/80 font-medium"
                                  title="{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}">
                                {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
                            </span>
                            <div class="flex gap-2 shrink-0">
                                <button class="btn btn-xs btn-primary" 
                                        hx-get="/api/player/embed?url={{ ep.url | urlencode }}" 
                                        hx-target="#video-player-display"
                                        hx-swap="innerHTML"
                                        onclick="document.getElementById('video-player-display').scrollIntoView({behavior: 'smooth'})">
                                    <i class="fas fa-play"></i> Regarder
                                </button>
                                <button class="btn btn-xs btn-ghost"
                                        hx-post="/api/anime/download?url={{ ep.url | urlencode }}"
                                        hx-swap="none"
                                        title="Télécharger cet épisode">
                                    <i class="fas fa-download"></i>
                                </button>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        {% else %}
            <div class="text-center py-12 text-base-content/40">
                <i class="fas fa-exclamation-circle text-3xl mb-3 block"></i>
                <p>Aucun épisode trouvé pour cette source.</p>
            </div>
        {% endif %}
    </div>
</div>
