{% extends spa_base or "base.html" %}
{% block title %}Videos - Troço Play{% endblock %}
{% block meta_description %}Vídeos institucionais e apresentação do Troço Play. Conheça a plataforma de IPTV com canais ao vivo, filmes e séries online.{% endblock %}
{% block extra_head %}
<style>
    body { background: #000; }
    .videos-hero {
        text-align: center;
        padding: 80px 24px 32px;
        background: linear-gradient(180deg, rgba(0,0,0,0.9) 0%, #000 100%);
    }
    .videos-hero h1 {
        font-size: 2.6em;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: -1px;
        margin-bottom: 12px;
    }
    .videos-hero h1 span { color: var(--primary); }
    .videos-hero p { color: var(--text-secondary); font-size: 1.1em; max-width: 640px; margin: 0 auto; }
    .videos-list {
        max-width: 960px;
        margin: 0 auto;
        padding: 40px 24px 80px;
    }
    .vid-block {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        margin-bottom: 32px;
        overflow: hidden;
    }
    .vid-block .vid-body { position: relative; padding-bottom: 56.25%; height: 0; }
    .vid-block .vid-body iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
    .vid-block .vid-foot { padding: 16px 20px; }
    .vid-block .vid-title { font-size: 1.05em; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
    .vid-block .vid-desc { color: var(--text-secondary); font-size: 0.9em; line-height: 1.5; }
    .vid-empty { color: var(--text-muted); text-align: center; padding: 50px; font-size: 1em; }
    @media (max-width: 640px) { .videos-hero h1 { font-size: 1.9em; } }
</style>
{% endblock %}
{% block content %}
<section class="videos-hero">
    <h1><span>🎬</span> Videos</h1>
    <p>Conheça o Troço Play, sua plataforma IPTV favorita com canais ao vivo, filmes e séries online.</p>
</section>

<div class="videos-list">
    {% if videos %}
        {% for v in videos %}
        <div class="vid-block">
            <div class="vid-body">
                <iframe src="{{ v.youtube_embed_url() }}" title="{{ v.title }}"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
                        allowfullscreen></iframe>
            </div>
            <div class="vid-foot">
                {% if v.title %}<div class="vid-title">{{ v.title }}</div>{% endif %}
                {% if v.description %}<div class="vid-desc">{{ v.description }}</div>{% endif %}
            </div>
        </div>
        {% endfor %}
    {% else %}
        <div class="vid-empty">Nenhum vídeo disponível no momento. Volte em breve!</div>
    {% endif %}
</div>
{% endblock %}