{% extends spa_base or "tv_base.html" %}
{% block title %}Historico{% 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_historico', type='all') }}">Todos ({{ counts.all }})</a><a class="tv-type-tab tv-focusable {% if content_type=='live' %}active{% endif %}" href="{{ url_for('tv_historico', type='live') }}">Canais ({{ counts.live }})</a><a class="tv-type-tab tv-focusable {% if content_type=='movie' %}active{% endif %}" href="{{ url_for('tv_historico', type='movie') }}">Filmes ({{ counts.movie }})</a><a class="tv-type-tab tv-focusable {% if content_type=='series' %}active{% endif %}" href="{{ url_for('tv_historico', type='series') }}">Séries ({{ counts.series }})</a></div>
<div class="tv-row"><div class="tv-row-header"><h2 class="tv-row-title">Historico</h2><span class="tv-row-count">{{ items|length }} item(ns)</span></div><div class="tv-row-scroll">
{% for c in items %}{% if c.tipo == 'live' %}<div class="tv-card tv-focusable" tabindex="0" data-canal-id="{{ c.id }}" data-canal-name="{{ c.name }}" data-canal-logo="{{ c.logo|proxy_logo if c.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 c.tipo == 'movie' %}{{ url_for('tv_player', tipo='movie', item_id=c.id) }}{% else %}{{ url_for('tv_series_detail', series_name=c.series_name or c.name) }}{% endif %}">{% endif %}<div class="tv-card-thumb">{% if c.logo %}<img src="{{ c.logo|proxy_logo }}" alt="{{ c.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';" loading="lazy" decoding="async"><span style="display:none">{% if c.tipo=='live' %}📺{% elif c.tipo=='movie' %}🎬{% else %}📚{% endif %}</span>{% else %}<span>{% if c.tipo=='live' %}📺{% elif c.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 c.tipo=='live' %}📺{% elif c.tipo=='movie' %}🎬{% else %}📚{% endif %}</span>
                <span style="overflow:hidden; text-overflow:ellipsis;">{{ c.name }}</span>
            </h3><div class="tv-card-meta">{{ c.group_title or ('Filme' if c.tipo=='movie' else 'Série' if c.tipo=='series' else 'Canal') }}</div><span class="tv-card-badge">{% if c.tipo=='live' %}AO VIVO{% elif c.tipo=='movie' %}FILME{% else %}SÉRIE{% endif %}</span></div>{% if c.tipo != 'live' %}</a>{% else %}</div>{% endif %}{% else %}<div class="tv-empty"><div>🕐</div><h2>Historico vazio</h2><p>Assista a um canal, filme ou série para vê-lo aqui.</p></div>{% endfor %}
</div></div>
{% endblock %}