{% extends "tv/base.html" %}
{% block title %}{{ series.title or series.folder_name }} - VideoKonverter TV{% endblock %}

{% block content %}
<section class="tv-section">
    <!-- Serien-Header -->
    <div class="tv-detail-header">
        {% if series.poster_url %}
        <img src="{{ series.poster_url }}" alt="" class="tv-detail-poster">
        {% endif %}
        <div class="tv-detail-info">
            <h1 class="tv-page-title">{{ series.title or series.folder_name }}</h1>
            {% if series.genres %}
            <p class="tv-detail-genres">{{ series.genres }}</p>
            {% endif %}
            {% if series.overview %}
            <p class="tv-detail-overview">{{ series.overview }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Staffel-Tabs -->
    {% if seasons %}
    <div class="tv-tabs" id="season-tabs">
        {% for sn in seasons.keys() %}
        <button class="tv-tab {% if loop.first %}active{% endif %}"
                data-focusable
                onclick="showSeason({{ sn }})">
            {% if sn == 0 %}Specials{% else %}Staffel {{ sn }}{% endif %}
        </button>
        {% endfor %}
    </div>

    <!-- Episoden pro Staffel -->
    {% for sn, episodes in seasons.items() %}
    <div class="tv-season" id="season-{{ sn }}" {% if not loop.first %}style="display:none"{% endif %}>
        <div class="tv-episode-list">
            {% for ep in episodes %}
            <a href="/tv/player?v={{ ep.id }}" class="tv-episode" data-focusable>
                <span class="tv-episode-num">
                    {% if ep.episode_number %}E{{ "%02d"|format(ep.episode_number) }}{% else %}-{% endif %}
                </span>
                <span class="tv-episode-title">
                    {{ ep.episode_title or ep.file_name }}
                </span>
                <span class="tv-episode-meta">
                    {% if ep.duration_sec %}{{ (ep.duration_sec / 60)|round|int }} Min{% endif %}
                    {% if ep.width %} &middot; {{ ep.width }}x{{ ep.height }}{% endif %}
                </span>
                <span class="tv-episode-play">&#9654;</span>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
    {% else %}
    <div class="tv-empty">Keine Episoden vorhanden.</div>
    {% endif %}
</section>
{% endblock %}

{% block scripts %}
<script>
function showSeason(sn) {
    // Alle Staffeln verstecken
    document.querySelectorAll('.tv-season').forEach(el => el.style.display = 'none');
    // Alle Tabs deaktivieren
    document.querySelectorAll('.tv-tab').forEach(el => el.classList.remove('active'));
    // Gewaehlte Staffel anzeigen
    const season = document.getElementById('season-' + sn);
    if (season) season.style.display = '';
    // Tab aktivieren
    event.target.classList.add('active');
}
</script>
{% endblock %}