{% set status_filter = request.query_params.get('status', 'all') %}
<div class="flex flex-col gap-5" x-data="{ currentFilter: '{{ status_filter }}' }">
    <!-- Filter Tabs -->
    <div class="tabs tabs-boxed bg-base-200 p-1">
        <button class="tab {% if status_filter == 'all' or not status_filter %}tab-active{% endif %}"
                hx-get="/api/watchlist?status=all"
                hx-target="#watchlist-items-container"
                hx-swap="outerHTML">
            <i class="fas fa-list"></i> Tous
        </button>
        <button class="tab {% if status_filter == 'active' %}tab-active{% endif %}"
                hx-get="/api/watchlist?status=active"
                hx-target="#watchlist-items-container"
                hx-swap="outerHTML">
            <i class="fas fa-play"></i> Actifs
        </button>
        <button class="tab {% if status_filter == 'paused' %}tab-active{% endif %}"
                hx-get="/api/watchlist?status=paused"
                hx-target="#watchlist-items-container"
                hx-swap="outerHTML">
            <i class="fas fa-pause"></i> En pause
        </button>
        <button class="tab {% if status_filter == 'completed' %}tab-active{% endif %}"
                hx-get="/api/watchlist?status=completed"
                hx-target="#watchlist-items-container"
                hx-swap="outerHTML">
            <i class="fas fa-check"></i> Terminés
        </button>
    </div>

    <!-- Watchlist Items Grid -->
    {% if items and items | length > 0 %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for item in items %}
                <div class="card bg-base-200 border border-base-300 hover:border-primary transition-colors" id="watchlist-{{ item.id }}" data-item-id="{{ item.id }}">
                    <div class="card-body p-4 flex-row gap-4">
                        <!-- Poster -->
                        <figure class="w-24 shrink-0 relative">
                            <img src="{{ item.poster_image or item.cover_image or '/static/img/no-poster.png' }}"
                                 alt="{{ item.anime_title }}"
                                 class="rounded-lg aspect-[2/3] object-cover w-full"
                                 onerror="this.src='/static/img/no-poster.png'">
                            <!-- Status badge -->
                            <span class="badge badge-sm absolute top-2 left-2
                                {% if item.status == 'active' %}badge-success
                                {% elif item.status == 'paused' %}badge-warning
                                {% elif item.status == 'completed' %}badge-primary
                                {% else %}badge-ghost{% endif %}">
                                {% if item.status == 'active' %}
                                    <i class="fas fa-play"></i> Actif
                                {% elif item.status == 'paused' %}
                                    <i class="fas fa-pause"></i> Pause
                                {% elif item.status == 'completed' %}
                                    <i class="fas fa-check"></i> Terminé
                                {% else %}
                                    <i class="fas fa-archive"></i> Archivé
                                {% endif %}
                            </span>
                            <!-- Auto-download badge -->
                            {% if item.auto_download %}
                                <span class="badge badge-primary badge-sm absolute bottom-2 left-2">
                                    <i class="fas fa-magic"></i> Auto
                                </span>
                            {% endif %}
                        </figure>

                        <!-- Content -->
                        <div class="flex-1 min-w-0 flex flex-col gap-1.5">
                            <h3 class="font-bold text-sm truncate m-0">{{ item.anime_title }}</h3>

                            <!-- Meta badges -->
                            <div class="flex flex-wrap gap-1.5 text-[0.7rem]">
                                <span class="badge badge-outline badge-sm">
                                    <i class="fas fa-tv"></i> {{ item.provider_id | upper }}
                                </span>
                                <span class="badge badge-outline badge-sm badge-ghost">{{ item.lang | upper }}</span>
                                {% if item.quality_preference and item.quality_preference != 'auto' %}
                                    <span class="badge badge-outline badge-sm badge-success">{{ item.quality_preference }}</span>
                                {% endif %}
                            </div>

                            <!-- Synopsis -->
                            {% if item.synopsis %}
                                <p class="text-xs text-base-content/50 m-0 line-clamp-3">{{ item.synopsis | truncate(150) }}</p>
                            {% endif %}

                            <!-- Stats -->
                            <div class="flex flex-wrap gap-3 text-[0.7rem] text-base-content/50">
                                <span class="flex items-center gap-1">
                                    <i class="fas fa-download"></i>
                                    Ép. {{ item.last_episode_downloaded }}
                                    {% if item.total_episodes %}/ {{ item.total_episodes }}{% endif %}
                                </span>
                                {% if item.added_at %}
                                    <span class="flex items-center gap-1" title="Ajouté le {{ item.added_at.strftime('%d/%m/%Y') }}">
                                        <i class="fas fa-calendar"></i>
                                        {{ item.added_at.strftime('%d/%m/%Y') }}
                                    </span>
                                {% endif %}
                            </div>

                            <!-- Actions -->
                            <div class="flex gap-1 mt-auto pt-2 border-t border-base-300">
                                <!-- Pause/Resume Toggle -->
                                {% if item.status == 'active' %}
                                    <button class="btn btn-circle btn-sm btn-warning"
                                            hx-put="/api/watchlist/{{ item.id }}"
                                            hx-vals='{"status": "paused"}'
                                            hx-swap="none"
                                            hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
                                            title="Mettre en pause">
                                        <i class="fas fa-pause"></i>
                                    </button>
                                {% elif item.status == 'paused' %}
                                    <button class="btn btn-circle btn-sm btn-success"
                                            hx-put="/api/watchlist/{{ item.id }}"
                                            hx-vals='{"status": "active"}'
                                            hx-swap="none"
                                            hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
                                            title="Reprendre">
                                        <i class="fas fa-play"></i>
                                    </button>
                                {% endif %}

                                <!-- Mark as completed -->
                                {% if item.status not in ['completed', 'archived'] %}
                                    <button class="btn btn-circle btn-sm btn-ghost"
                                            hx-put="/api/watchlist/{{ item.id }}"
                                            hx-vals='{"status": "completed"}'
                                            hx-swap="none"
                                            hx-on::after-request="htmx.trigger('#watchlist-items-container', 'refresh');"
                                            title="Marquer comme terminé">
                                        <i class="fas fa-check"></i>
                                    </button>
                                {% endif %}

                                <!-- Delete -->
                                <button class="btn btn-circle btn-sm btn-error"
                                        hx-delete="/api/watchlist/{{ item.id }}"
                                        hx-target="#watchlist-{{ item.id }}"
                                        hx-swap="outerHTML"
                                        hx-confirm="Supprimer '{{ item.anime_title }}' de votre watchlist ?"
                                        title="Supprimer">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="text-center py-16 bg-base-200 rounded-box border border-dashed border-base-300">
            <i class="fas fa-inbox text-6xl text-base-content/20 mb-5 block"></i>
            <h3 class="text-lg font-bold mb-2 text-base-content">Votre watchlist est vide</h3>
            <p class="text-base-content/50 mb-6">Ajoutez des animes ou séries depuis l'onglet Recherche pour commencer à suivre leurs sorties.</p>
            <button class="btn btn-primary" @click="$dispatch('set-tab', {tab: 'anime'})">
                <i class="fas fa-search"></i> Rechercher des animes
            </button>
        </div>
    {% endif %}
</div>