{% macro anime_card(anime, in_watchlist=False, lang='vostfr') %}
<div class="anime-card" id="anime-{{ anime.url | hash }}">
    <div class="anime-poster">
        {% set poster = anime.cover_image or (anime.metadata.poster_image if anime.metadata else None) or 'https://placehold.co/400x600/161625/00d9ff?text=No+Image' %}
        <img src="{{ poster }}" 
             alt="{{ anime.title }}" 
             loading="lazy"
             referrerpolicy="no-referrer"
             onerror="this.src='https://placehold.co/400x600/161625/00d9ff?text=Image+Error'; this.onerror=null;">
        
        {% if anime.metadata and anime.metadata.rating %}
        <div class="anime-rating-badge">
            <i class="fas fa-star"></i> {{ anime.metadata.rating }}
        </div>
        {% endif %}

        <div class="anime-overlay">
            <div class="overlay-buttons">
                <button class="btn btn-primary btn-circle" 
                        hx-get="/api/anime/episodes?url={{ anime.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="{{ anime.title }}">{{ anime.title }}</h3>
        
        <div class="anime-meta-tags">
            <span class="badge">{{ anime.provider_id or 'Anime' }}</span>
            <span class="badge" style="color: var(--primary)">{{ lang | upper }}</span>
            {% if anime.metadata and anime.metadata.status %}
                <span class="badge" style="color: #aaa">{{ anime.metadata.status }}</span>
            {% endif %}
        </div>
        
        <div class="anime-card-buttons">
            <button class="btn btn-primary btn-small" 
                    hx-get="/api/anime/episodes?url={{ anime.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={{ anime.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": "{{ anime.url }}", "anime_title": "{{ anime.title }}", "provider_id": "{{ anime.provider_id }}", "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 %}