{% extends spa_base or "tv_base.html" %}
{% block title %}Favoritos{% endblock %}
{% block extra_head %}<style>
.tv-type-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:18px}.tv-type-tab{flex:0 0 auto;padding:11px 22px;border:2px solid var(--tv-highlight);border-radius:var(--tv-radius);color:var(--tv-text-secondary);text-decoration:none;font-size:.78em;font-weight:600}.tv-type-tab.active,.tv-type-tab:focus{background:var(--tv-primary);border-color:var(--tv-primary);color:#fff}.tv-vod-card{display:block;color:inherit;text-decoration:none}.tv-vod-card .tv-card-thumb{height:auto;aspect-ratio:2/3}.tv-vod-card .tv-card-thumb img{object-fit:cover}.tv-empty{padding:50px;text-align:center;color:var(--tv-text-secondary)}
</style>{% endblock %}
{% block content %}<div class="tv-type-tabs"><a class="tv-type-tab tv-focusable {% if content_type=='all' %}active{% endif %}" href="{{ url_for('tv_favoritos', type='all') }}">Todos ({{ counts.all }})</a><a class="tv-type-tab tv-focusable {% if content_type=='live' %}active{% endif %}" href="{{ url_for('tv_favoritos', type='live') }}">Canais ({{ counts.live }})</a><a class="tv-type-tab tv-focusable {% if content_type=='movie' %}active{% endif %}" href="{{ url_for('tv_favoritos', type='movie') }}">Filmes ({{ counts.movie }})</a><a class="tv-type-tab tv-focusable {% if content_type=='series' %}active{% endif %}" href="{{ url_for('tv_favoritos', type='series') }}">Séries ({{ counts.series }})</a></div>
  <div class="tv-row"><div class="tv-row-header"><h2 class="tv-row-title">Favoritos</h2><span class="tv-row-count">{{ items.total }} item(ns)</span></div><div class="tv-row-scroll">
{% for c in items.items %}{% set is_series_ns = (c.representative is defined) and c.representative %}{% set item_name = c.name %}{% set item_logo = c.representative.logo if is_series_ns else c.logo %}{% set item_tipo = 'series' if is_series_ns else c.tipo %}{% if item_tipo == 'live' %}<div class="tv-card tv-focusable" tabindex="0" data-canal-id="{{ c.id }}" data-canal-name="{{ c.name }}" data-canal-logo="{{ item_logo|proxy_logo if item_logo else '' }}" data-canal-group="{{ c.group_title or '' }}" data-stream-url="{{ url_for('tv_player', tipo='live', item_id=c.id) }}" onclick="openTVChannelPopup(this)">{% else %}<a class="tv-card tv-vod-card tv-focusable" tabindex="0" href="{% if item_tipo == 'movie' %}{{ url_for('tv_movie_detail', item_id=c.id) }}{% else %}{{ url_for('tv_series_detail', series_name=item_name|urlencode) }}{% endif %}">{% endif %}<div class="tv-card-thumb">{% if item_logo %}<img src="{{ item_logo|proxy_logo }}" alt="{{ item_name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" loading="lazy" decoding="async"><span style="display:none">{% if item_tipo=='live' %}📺{% elif item_tipo=='movie' %}🎬{% else %}📚{% endif %}</span>{% else %}<span>{% if item_tipo=='live' %}📺{% elif item_tipo=='movie' %}🎬{% else %}📚{% endif %}</span>{% endif %}</div><div class="tv-card-body"><h3 style="display:flex; align-items:center; gap:6px; font-size:0.95em; font-weight:600; color:var(--tv-text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3;">
                <span style="font-size:1em; flex-shrink:0;">{% if item_tipo=='live' %}📺{% elif item_tipo=='movie' %}🎬{% else %}📚{% endif %}</span>
                <span style="overflow:hidden; text-overflow:ellipsis;">{{ item_name }}</span>
            </h3><div class="tv-card-meta">{{ c.group_title or ('Filme' if item_tipo=='movie' else 'Serie' if item_tipo=='series' else 'Canal') }}</div><span class="tv-card-badge">{% if item_tipo=='live' %}AO VIVO{% elif item_tipo=='movie' %}FILME{% else %}SERIE{% endif %}</span></div>{% if item_tipo != 'live' %}</a>{% else %}</div>{% endif %}{% else %}<div class="tv-empty"><div>⭐</div><h2>Nenhum favorito</h2><p>Escolha Todos, Canais, Filmes ou Series para filtrar.</p></div>{% endfor %}
</div></div>
{% endblock %}