{% if items %}
    <div class="watchlist-grid">
        {% for item in items %}
            <div class="watchlist-item card" id="watchlist-{{ item.id }}">
                <div class="item-poster">
                    <img src="{{ item.poster_image or '/static/img/no-poster.png' }}" alt="{{ item.anime_title }}">
                </div>
                <div class="item-info">
                    <h3>{{ item.anime_title }}</h3>
                    <div class="item-meta">
                        <span class="badge">{{ item.provider_id }}</span>
                        <span class="badge badge-{{ item.status }}">{{ item.status }}</span>
                    </div>
                    <div class="item-stats">
                        <span>Épisode: {{ item.last_episode_downloaded }}</span>
                    </div>
                    <div class="item-actions">
                        <button class="btn btn-sm btn-primary"
                                hx-get="/api/anime/episodes?url={{ item.anime_url | urlencode }}"
                                hx-target="#player-container">
                            <i class="fas fa-play"></i>
                        </button>
                        <button class="btn btn-sm btn-danger"
                                hx-delete="/api/watchlist/{{ item.id }}"
                                hx-target="#watchlist-{{ item.id }}"
                                hx-swap="outerHTML"
                                hx-confirm="Retirer de la watchlist ?">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="empty-state">
        <p>Votre watchlist est vide.</p>
    </div>
{% endif %}