{% extends spa_base or "base.html" %}
{% block title %}🏆 Esportes{% endblock %}
{% block extra_head %}
<style>
    .sports-header { margin-bottom: 24px; }
    .sports-header h1 { font-size: 1.8em; font-weight: 700; margin-bottom: 8px; }
    .sports-header p { color: var(--text-muted); font-size: 0.9em; }
    .date-section { margin-bottom: 32px; }
    .date-title { font-size: 1.3em; font-weight: 700; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--primary); }
    .sport-group { margin-bottom: 20px; }
    .sport-name { font-size: 1.1em; font-weight: 700; color: var(--primary); margin-bottom: 8px; }
    .champ-name { font-size: 0.9em; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; padding-left: 16px; }
    .event-list { padding-left: 32px; }
    .event-item {
        display: flex; align-items: center; gap: 12px;
        padding: 10px 14px; margin-bottom: 6px;
        background: var(--bg-surface); border-radius: var(--radius-md);
        border-left: 3px solid var(--border); transition: var(--transition);
        cursor: default;
    }
    .event-item:hover { background: var(--bg-elevated); border-left-color: var(--primary); }
    .event-time {
        font-size: 0.85em; font-weight: 700; color: var(--primary);
        white-space: nowrap; min-width: 52px;
    }
    .event-teams { flex: 1; font-size: 0.9em; }
    .event-teams .team1 { font-weight: 600; }
    .event-teams .team2 { font-weight: 600; }
    .event-score {
        font-size: 0.85em; font-weight: 700; color: var(--gold);
        margin: 0 4px;
    }
    .event-vs { color: var(--text-muted); margin: 0 4px; }
    .event-channels { display: flex; gap: 6px; flex-wrap: wrap; }
    .event-channel {
        display: inline-flex; align-items: center;
        padding: 4px 10px; border-radius: 100px;
        font-size: 0.75em; font-weight: 600;
        text-decoration: none; transition: var(--transition);
        position: relative;
    }
    .event-channel.found {
        background: rgba(70,211,105,0.15); color: var(--green);
        border: 1px solid rgba(70,211,105,0.3);
    }
    .event-channel.found:hover { background: var(--green); color: #fff; }
    .event-channel.missing {
        background: rgba(255,255,255,0.05); color: var(--text-muted);
        border: 1px solid var(--border);
    }
    .quality-popup {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 100;
        background: var(--bg-surface);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 4px;
        min-width: 140px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.3);
        margin-top: 4px;
    }
    .quality-popup.active { display: block; }
    .quality-popup a {
        display: block;
        padding: 8px 12px;
        border-radius: var(--radius-sm);
        color: var(--text-primary);
        text-decoration: none;
        font-size: 0.85em;
        font-weight: 500;
        transition: var(--transition);
    }
    .quality-popup a:hover {
        background: var(--bg-elevated);
        color: var(--green);
    }
    .filter-bar {
        display: flex; align-items: center; gap: 10px;
        margin-bottom: 24px; flex-wrap: wrap;
    }
    .filter-btn {
        padding: 8px 20px; border-radius: var(--radius-md);
        border: 2px solid var(--border);
        background: transparent; color: var(--text-secondary);
        font-size: 0.9em; font-weight: 600; cursor: pointer;
        transition: var(--transition); text-decoration: none;
        display: inline-flex; align-items: center;
    }
    .filter-btn:hover { border-color: var(--primary); color: var(--primary); }
    .filter-btn.active {
        background: var(--primary); color: #fff;
        border-color: var(--primary);
    }
    .filter-date-input {
        padding: 6px 14px; border-radius: var(--radius-md);
        border: 2px solid var(--border);
        background: var(--bg-surface); color: var(--text-primary);
        font-size: 0.9em; cursor: pointer;
    }
    .filter-date-input:focus { border-color: var(--primary); outline: none; }
    .filter-nav-btn {
        padding: 8px 14px; border-radius: var(--radius-md);
        border: 2px solid var(--border);
        background: transparent; color: var(--text-secondary);
        font-size: 0.9em; cursor: pointer; transition: var(--transition);
        text-decoration: none; display: inline-flex; align-items: center;
    }
    .filter-nav-btn:hover { border-color: var(--primary); color: var(--primary); }
    .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); }
    .empty-state .icon { font-size: 3em; margin-bottom: 16px; }
    @media (max-width: 768px) {
        .event-item { flex-wrap: wrap; }
        .event-channels { width: 100%; margin-top: 4px; }
        .event-list { padding-left: 8px; }
        .champ-name { padding-left: 8px; }
    }
</style>
{% endblock %}
{% block content %}
<div class="sports-header">
    <h1>🏆 Esportes</h1>
    <p>Eventos esportivos ao vivo &mdash; <strong>horários de Brasília (BRT)</strong></p>
</div>

<div class="filter-bar">
    <a href="{{ url_for('esportes', date=today) }}"
       class="filter-btn {% if selected_date == today %}active{% endif %}">Hoje</a>
    <a href="{{ url_for('esportes', date=tomorrow) }}"
       class="filter-btn {% if selected_date == tomorrow %}active{% endif %}">Amanhã</a>
    <input type="date" class="filter-date-input" id="datePicker"
           value="{{ selected_date }}"
           aria-label="Filtrar eventos por data"
           onchange="if(this.value) window.location.href='{{ url_for('esportes') }}?date='+this.value;">
    <a href="{{ url_for('esportes', date=prev_date) }}"
       class="filter-nav-btn" title="Dia anterior">◀</a>
    <a href="{{ url_for('esportes', date=next_date) }}"
       class="filter-nav-btn" title="Próximo dia">▶</a>
</div>

{% if grouped %}
    {% for date_label, sports in grouped.items() %}
    <div class="date-section">
        <div class="date-title">{{ date_label }}</div>
        {% for sport_name, championships in sports.items() %}
        <div class="sport-group">
            <div class="sport-name">{{ sport_name }}</div>
            {% for champ_name, events in championships.items() %}
            <div class="champ-name">{% if champ_name %}{{ champ_name }}{% endif %}</div>
            <div class="event-list">
                {% for ev in events %}
                <div class="event-item">
                    <div class="event-time">{{ ev.event_time }}</div>
                    <div class="event-teams">
                        <span class="team1">{{ ev.team1 }}</span>
                        {% if ev.team2 %}
                        <span class="event-vs">vs</span>
                        <span class="team2">{{ ev.team2 }}</span>
                        {% endif %}
                        {% if ev.score %}
                        <span class="event-score">({{ ev.score }})</span>
                        {% endif %}
                    </div>
                    <div class="event-channels">
                        {% for ch in ev.channels %}
                            {% if ch.found %}
                                {% if ch.matches|length > 1 %}
                                <span class="event-channel found" onclick="toggleQuality(this)">
                                    {{ ch.name }} ▾
                                    <span class="quality-popup">
                                        {% for m in ch.matches %}
                                        <a href="{{ url_for('player', tipo='live', item_id=m.id) }}">{{ m.name }}</a>
                                        {% endfor %}
                                    </span>
                                </span>
                                {% else %}
                                <a href="{{ url_for('player', tipo='live', item_id=ch.id) }}" class="event-channel found">{{ ch.name }}</a>
                                {% endif %}
                            {% else %}
                            <span class="event-channel missing">{{ ch.name }}</span>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endfor %}
        </div>
        {% endfor %}
    </div>
    {% endfor %}
{% else %}
<div class="empty-state">
    <div class="icon">🏆</div>
    <h2>{% if selected_date == today %}Nenhum evento hoje{% else %}Nenhum evento nesta data{% endif %}</h2>
    <p>{% if selected_date == today %}Volte mais tarde para conferir a programação esportiva.{% else %}Tente selecionar outra data.{% endif %}</p>
</div>
{% endif %}
<script>
function toggleQuality(el) {
    el.classList.toggle('active');
    var popup = el.querySelector('.quality-popup');
    if (popup) popup.classList.toggle('active');
}
document.addEventListener('click', function(e) {
    if (!e.target.closest('.event-channel')) {
        document.querySelectorAll('.quality-popup.active').forEach(function(p) {
            p.classList.remove('active');
        });
        document.querySelectorAll('.event-channel.active').forEach(function(el) {
            el.classList.remove('active');
        });
    }
});
</script>
{% endblock %}