{% macro series_card(series, in_watchlist=False, lang='vf') %}
<div class="anime-card" id="series-{{ series.url | hash }}">
    <div class="anime-poster">
        <img src="{{ series.cover_image or 'https://placehold.co/400x600/161625/ff6b6b?text=No+Image' }}" 
             alt="{{ series.title }}" 
             loading="lazy"
             referrerpolicy="no-referrer"
             onerror="this.src='https://placehold.co/400x600/161625/ff6b6b?text=Image+Error'; this.onerror=null;">
        <div class="anime-overlay">
            <div class="overlay-buttons">
                <button class="btn btn-primary btn-circle" 
                        hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang={{ lang }}" 
                        hx-target="#player-container"
                        hx-swap="innerHTML"
                        title="Play">
                    <i class="fas fa-play"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="anime-info">
        <h3 class="anime-title" title="{{ series.title }}">{{ series.title }}</h3>
        <div class="anime-meta-tags">
            <span class="badge">{{ series.provider_id | upper if series.provider_id else 'FS7' }}</span>
            <span class="badge" style="color: var(--primary)">{{ lang | upper }}</span>
        </div>
        
        <div class="anime-card-buttons">
            <button class="btn btn-primary btn-small" 
                    hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang={{ lang }}" 
                    hx-target="#player-container"
                    hx-swap="innerHTML">
                <i class="fas fa-eye"></i> <span>Regarder</span>
            </button>
            <button class="btn btn-secondary btn-small" 
                    hx-get="/api/anime/episodes?url={{ series.url | urlencode }}&lang={{ lang }}" 
                    hx-target="#player-container"
                    hx-swap="innerHTML">
                <i class="fas fa-download"></i> <span>Télécharger</span>
            </button>
        </div>

        {% if not in_watchlist %}
        <button class="btn btn-secondary btn-small btn-block"
                hx-post="/api/watchlist"
                hx-vals='{"anime_url": "{{ series.url }}", "anime_title": "{{ series.title }}", "provider_id": "{{ series.provider_id or 'fs7' }}", "lang": "{{ lang }}"}'
                hx-swap="none"
                hx-on::after-request="this.innerHTML='<i class=\'fas fa-check\'></i> Suivi'; this.disabled=true; this.classList.add('followed')">
            <i class="fas fa-plus"></i> Watchlist
        </button>
        {% else %}
        <button class="btn btn-secondary btn-small btn-block followed" disabled>
            <i class="fas fa-check"></i> Suivi
        </button>
        {% endif %}
    </div>
</div>
{% endmacro %}