{% extends spa_base or "base.html"%}
{% block title %}Admin - Videos{% endblock %}
{% block extra_head %}
<style>
    .vid-page { max-width: 900px; }
    .vid-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 22px 26px;
        margin-bottom: 22px;
    }
    .vid-card h3 { font-size: 1.05em; font-weight: 700; color: var(--text-primary); margin-bottom: 14px; display:flex; align-items:center; gap:10px;}
    .vid-card h3 .badge { font-size: 0.65em; padding: 3px 8px; border-radius: 100px; background: rgba(0,0,0,.3); color: var(--text-secondary); }
    .form-group { margin-bottom: 16px; }
    .form-group label { display:block; font-size:0.78em; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:6px; font-weight:500; }
    .form-group input, .form-group textarea, .form-group select { width:100%; padding:10px 14px; background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-md); color:var(--text-primary); font-size:0.92em; }
    .form-group textarea { min-height:70px; resize:vertical; }
    .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline:none; border-color:var(--text-secondary); background:var(--bg-elevated); }
    .toggle-switch { position:relative; width:44px; height:24px; cursor:pointer; }
    .toggle-switch input { display:none; }
    .toggle-slider { position:absolute; inset:0; background:var(--bg-surface); border:1px solid var(--border); border-radius:100px; transition:var(--transition); }
    .toggle-slider::before { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:var(--text-muted); border-radius:50%; transition:var(--transition); }
    .toggle-switch input:checked + .toggle-slider { background:var(--primary); border-color:var(--primary); }
    .toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); background:#fff; }
    .vid-thumb { width:100%; max-width:280px; border-radius:8px; border:1px solid var(--border); margin-top:8px; }
    .vid-list { list-style:none; padding:0; margin:0; }
    .vid-list li { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg-surface); border-radius:8px; margin-bottom:8px; border:1px solid var(--border); }
    .vid-list li .vid-title { flex:1; font-size:0.92em; color:var(--text-primary); }
    .vid-list li .vid-loc { font-size:0.78em; color:var(--text-muted); }
    .actions-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
    .chip { display:inline-flex; align-items:center; gap:6px; font-size:0.78em; padding:4px 10px; border-radius:100px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-secondary); }
    .vid-empty { color:var(--text-muted); padding:32px; text-align:center; font-size:0.95em; }
    .vid-actions { display:flex; gap:8px; }
</style>
{% endblock %}
{% block content %}
<div class="vid-page">
    <a href="{{ url_for('admin_panel') }}" style="color:var(--text-muted); text-decoration:none; font-size:0.9em; display:inline-flex; align-items:center; gap:6px; margin-bottom:20px;">← Voltar ao Painel</a>

    <div class="actions-top">
        <h1 style="font-size:1.45em; font-weight:700; color:var(--text-primary); margin:0;">🎬 Vídeos Institucionais (Intro)</h1>
        <span class="chip">{{ videos|length }} cadastrado(s)</span>
    </div>
    <p style="color:var(--text-muted); font-size:0.9em; margin-bottom:22px;">Gerencie os vídeos de introdução exibidos no início (landing), login e cadastro, além do app mobile e TV.</p>

    <div class="vid-card">
        <h3>Adicionar Novo Vídeo</h3>
        <form method="POST" class="vid-form">
            <input type="hidden" name="action" value="create">
            <div class="form-group">
                <label>Link ou ID do YouTube</label>
                <input type="text" name="youtube_url" placeholder="https://youtu.be/xxxxXXXxxxx ou ID">
                <div class="hint">Cole o link completo ou apenas o ID de 11 caracteres.</div>
            </div>
            <div class="form-group">
                <label>Título</label>
                <input type="text" name="title" value="Apresentação Troço Play">
            </div>
            <div class="form-group">
                <label>Descrição (opcional)</label>
                <textarea name="description" placeholder="Resumo curto exibido abaixo do vídeo..."></textarea>
            </div>
            <div class="form-group">
                <label>Locais de Exibição</label>
                <div style="display:flex; flex-wrap:wrap; gap:10px;">
                    {% for val, label in video_locations %}
                    <label style="display:flex; align-items:center; gap:8px; padding:10px 14px; background:var(--bg-surface); border-radius:8px; border:1px solid var(--border); cursor:pointer;">
                        <input type="checkbox" name="locations" value="{{ val }}"> {{ label }}
                    </label>
                    {% endfor %}
                </div>
            </div>
            <div class="form-group">
                <label>Ordem (0 = primeiro)</label>
                <input type="number" name="sort_order" value="0" min="0">
            </div>
            <div class="toggle-row" style="margin-bottom:8px;">
                <span class="toggle-label">Ativo</span>
                <label class="toggle-switch">
                    <input type="checkbox" name="is_active" checked>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="toggle-row" style="margin-bottom:8px;">
                <span class="toggle-label">Autoplay (reprodução automática)</span>
                <label class="toggle-switch">
                    <input type="checkbox" name="autoplay">
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <div class="toggle-row">
                <span class="toggle-label">Mostrar controles do YouTube</span>
                <label class="toggle-switch">
                    <input type="checkbox" name="show_controls" checked>
                    <span class="toggle-slider"></span>
                </label>
            </div>
            <button type="submit" class="btn" style="width:auto; margin-top:10px;">Salvar Vídeo</button>
        </form>
    </div>

    <div class="vid-card">
        <h3>Vídeos Cadastrados</h3>
        {% if videos %}
        <ul class="vid-list">
            {% for v in videos %}
            <li>
                <div style="flex:1; min-width:0;">
                    <div class="vid-title">{{ v.title }} <span class="chip">{{ v.youtube_id }}</span></div>
                    <div class="vid-loc">{% if v.is_active %}🟢 Ativo{% else %}🔴 Oculto{% endif %} · Locais: {{ v.locations or '-' }} · Ordem {{ v.sort_order }}</div>
                </div>
                <form method="POST" style="display:flex; gap:8px;">
                    <input type="hidden" name="action" value="toggle">
                    <input type="hidden" name="id" value="{{ v.id }}">
                    <button type="submit" class="btn btn-ghost" style="padding:8px 14px; font-size:0.82em;" title="Alternar ativo/inativo">
                        {% if v.is_active %}Ocultar{% else %}Ativar{% endif %}
                    </button>
                </form>
                <form method="POST" action="#" style="display:none;" id="edit-{{ v.id }}">
                    <input type="hidden" name="action" value="edit">
                    <input type="hidden" name="id" value="{{ v.id }}">
                    <input type="hidden" name="youtube_url" value="{{ v.youtube_watch_url }}">
                    <input type="hidden" name="title" value="{{ v.title }}">
                    <input type="hidden" name="description" value="{{ v.description }}">
                    <input type="hidden" name="locations" value="{{ v.locations }}">
                    <input type="hidden" name="sort_order" value="{{ v.sort_order }}">
                    <input type="hidden" name="is_active" value="{{ 'on' if v.is_active else '' }}">
                    <input type="hidden" name="autoplay" value="{{ 'on' if v.autoplay else '' }}">
                    <input type="hidden" name="show_controls" value="{{ 'on' if v.show_controls else '' }}">
                </form>
                <button type="button" onclick="document.getElementById('edit-{{ v.id }}').submit()" class="btn btn-ghost" style="padding:8px 14px; font-size:0.82em;" title="Editar">Editar</button>
                <form method="POST" onsubmit="return confirm('Remover este video?');" style="display:inline;">
                    <input type="hidden" name="action" value="delete">
                    <input type="hidden" name="id" value="{{ v.id }}">
                    <button type="submit" class="btn" style="background:rgba(229,9,20,0.15); color:var(--primary); border-color:rgba(229,9,20,0.3); padding:8px 14px; font-size:0.82em;">Excluir</button>
                </form>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <div class="vid-empty">Nenhum vídeo cadastrado ainda. Adicione usando o formulário acima.</div>
        {% endif %}
    </div>
</div>
{% endblock %}