{% extends "base.html" %}
{% block title %}Histórico{% endblock %}
{% block extra_head %}
<style>
    .page-header { margin-bottom: 20px; }
    .page-header h1 { font-size: 1.8em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .page-header p { color: var(--text-muted); font-size: 0.9em; }
    .history-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
    .history-tab { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1px solid var(--border); border-radius:999px; color:var(--text-secondary); background:var(--bg-card); font-size:.85em; }
    .history-tab:hover, .history-tab.active { color:#fff; background:var(--primary); border-color:var(--primary); }
    .history-tab .count { opacity:.8; font-size:.9em; }
    @media (max-width: 600px) { .history-tabs { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); } .history-tab { justify-content:center; } }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Histórico</h1>
    <p>Últimos conteúdos que você assistiu</p>
</div>
<div class="history-tabs" aria-label="Filtrar histórico">
    {% for key, label in [('all', 'Todos'), ('canais', 'Canais'), ('filmes', 'Filmes'), ('series', 'Séries')] %}
    <a class="history-tab {% if category == key %}active{% endif %}" href="{{ url_for('historico', tipo=key) }}">
        {{ label }} <span class="count">({{ counts[key] }})</span>
    </a>
    {% endfor %}
</div>
<div class="grid">
    {% for item in items %}
    <div class="card" onclick="location.href='{% if item.canal_id %}{{ url_for('player', tipo=item.tipo, item_id=item.canal_id) }}{% else %}#{% endif %}'">
        <div class="card-thumb">
            {% if item.logo %}
            <img src="{{ item.logo|proxy_logo }}" alt="{{ item.name }}" onerror="this.style.display='none';this.nextElementSibling.style.display='flex';">
            <span style="display:none;">{{ '🎬' if item.tipo == 'movie' else '📺' }}</span>
            {% else %}
            <span>{{ '🎬' if item.tipo == 'movie' else '📺' }}</span>
            {% endif %}
            <div class="play-overlay">▶</div>
        </div>
        <div class="card-body">
            <h3 title="{{ item.name }}">{{ item.name }}</h3>
            <div class="meta">{{ item.group_title }} · {{ item.last_seen|bdatetime }}</div>
            <span class="badge">{{ 'FILME' if item.tipo == 'movie' else 'SÉRIE' if item.tipo == 'series' else 'AO VIVO' }}</span>
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">
        Nenhum conteúdo nesta categoria.
    </div>
    {% endfor %}
</div>
{% endblock %}