{% extends "tv/base.html" %}
{% block title %}{{ t('watchlist.title') }} - VideoKonverter TV{% endblock %}

{% block content %}
<section class="tv-section">
    <h1 class="tv-page-title">{{ t('watchlist.title') }}</h1>

    {% if not series and not movies %}
    <div class="tv-empty">{{ t('watchlist.empty') }}</div>
    {% endif %}

    {% if series %}
    <div class="tv-section">
        <h2 class="tv-section-title">{{ t('watchlist.series') }}</h2>
        <div class="tv-grid">
            {% for s in series %}
            <a href="/tv/series/{{ s.id }}" class="tv-card" data-focusable>
                {% if s.poster_url %}
                <img data-src="{{ s.poster_url }}" alt="" class="tv-card-img tv-lazy" loading="lazy">
                {% else %}
                <div class="tv-card-placeholder">{{ s.title or s.folder_name }}</div>
                {% endif %}
                <div class="tv-card-info">
                    <span class="tv-card-title">{{ s.title or s.folder_name }}</span>
                    {% if s.genres %}
                    <span class="tv-card-meta">{{ s.genres }}</span>
                    {% endif %}
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    {% if movies %}
    <div class="tv-section">
        <h2 class="tv-section-title">{{ t('watchlist.movies') }}</h2>
        <div class="tv-grid">
            {% for m in movies %}
            <a href="/tv/movies/{{ m.id }}" class="tv-card" data-focusable>
                {% if m.poster_url %}
                <img data-src="{{ m.poster_url }}" alt="" class="tv-card-img tv-lazy" loading="lazy">
                {% else %}
                <div class="tv-card-placeholder">{{ m.title or m.folder_name }}</div>
                {% endif %}
                <div class="tv-card-info">
                    <span class="tv-card-title">{{ m.title or m.folder_name }}</span>
                    <span class="tv-card-meta">{% if m.year %}{{ m.year }}{% endif %} {% if m.genres %}{{ m.genres }}{% endif %}</span>
                </div>
            </a>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</section>
{% endblock %}
