ohm_streaming/templates/components/episode_list.html

<div class="episode-list-container section-container" x-data="{ view: 'grid' }">
    <div class="section-header">
        <div>
            <h2 style="border: none; padding: 0; margin-bottom: 5px;">{{ anime_title }}</h2>
            <span class="badge">{{ episodes|length }} épisodes disponibles</span>
        </div>
        <div class="header-actions" style="display: flex; gap: 10px;">
            <button class="btn btn-icon" @click="view = 'grid'" :class="{ 'btn-primary': view === 'grid' }">
                <i class="fas fa-th"></i>
            </button>
            <button class="btn btn-icon" @click="view = 'list'" :class="{ 'btn-primary': view === 'list' }">
                <i class="fas fa-list"></i>
            </button>
            <button class="btn btn-icon danger" onclick="document.getElementById('player-container').innerHTML = ''">
                <i class="fas fa-times"></i>
            </button>
        </div>
    </div>

    <!-- Zone d'affichage du player vidéo (Placé en haut pour une meilleure visibilité lors de la sélection) -->
    <div id="video-player-display"></div>

    <div class="episodes-content" :class="'view-' + view" style="margin-top: 25px;">
        {% if episodes %}
            {% for ep in episodes %}
                <div class="episode-item">
                    <div class="ep-number">EP {{ ep.episode_number or loop.index }}</div>
                    <div class="ep-title" title="{{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}">
                        {{ ep.title or 'Épisode ' ~ (ep.episode_number or loop.index) }}
                    </div>
                    <div class="ep-actions">
                        <button class="btn btn-primary btn-small" 
                                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-secondary btn-icon btn-small"
                                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 %}
        {% else %}
            <div class="no-results">
                <i class="fas fa-exclamation-circle"></i>
                <p>Aucun épisode trouvé pour cette source.</p>
            </div>
        {% endif %}
    </div>
</div>

<style>
.episode-list-container {
    margin-top: 30px;
    background: var(--bg-card);
    border-radius: var(--card-radius);
    padding: 30px;
    border: 1px solid var(--secondary);
    animation: fadeIn 0.3s ease-out;
}

.episodes-content.view-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 15px;
}

.view-grid .episode-item {
    background: var(--bg-elevated);
    padding: 20px 15px;
    border-radius: 4px;
    text-align: center;
    transition: var(--transition);
    border: 1px solid var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.view-grid .episode-item:hover { 
    background: var(--text-dim); 
    border-color: var(--primary);
}

.view-grid .ep-title { display: none; }
.view-grid .ep-number { font-weight: 800; font-size: 1.2rem; color: var(--primary); }
.view-grid .ep-actions { display: flex; flex-direction: column; gap: 8px; }
.view-grid .ep-actions .btn { width: 100%; }

.episodes-content.view-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.view-list .episode-item {
    display: flex;
    align-items: center;
    gap: 20px;
    background: var(--bg-elevated);
    padding: 12px 20px;
    border-radius: 4px;
    border: 1px solid var(--secondary);
    transition: var(--transition);
}

.view-list .episode-item:hover {
    background: var(--text-dim);
    border-color: var(--primary);
}

.view-list .ep-number { font-weight: 800; width: 60px; color: var(--primary); }
.view-list .ep-title { flex: 1; color: var(--text-main); font-weight: 500; }
.view-list .ep-actions { display: flex; gap: 10px; }

#video-player-display:not(:empty) {
    margin: 20px 0 30px 0;
    padding: 25px;
    background: #000;
    border-radius: 4px;
    border: 1px solid var(--primary);
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
</style>