{% extends spa_base or "base.html"%}
{% block title %}Favoritos{% endblock %}
{% block extra_head %}
<style>
    .page-header {
        margin-bottom: 24px;
    }
    .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;
    }
</style>
{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Favoritos</h1>
    <p>{{ items|length }} itens</p>
</div>

<div class="grid fav-grid">
    {% for item in items %}
    <div class="card" onclick="location.href='{{ url_for('player', tipo='live', item_id=item.id) }}'">
        <button class="fav-btn" data-id="{{ item.id }}" aria-label="Alternar favorito de {{ item.name|urldecode|e }}" onclick="toggleFav(this, {{ item.id }}, event)">★</button>
        <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';" loading="lazy" decoding="async">
            <span style="display:none;">📺</span>
            {% else %}
            <span>📺</span>
            {% endif %}
            <div class="play-overlay">▶</div>
        </div>
        <div class="card-body">
            <h3 title="{{ item.name }}">{{ item.name }}</h3>
            {% if item.group_title %}<div class="meta">{{ item.group_title }}</div>{% endif %}
            <span class="badge">AO VIVO</span>
        </div>
    </div>
    {% else %}
    <div style="grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--text-muted);">
        Nenhum favorito encontrado.
    </div>
    {% endfor %}
</div>
{% endblock %}