{% extends spa_base or "base.html"%}
{% block title %}Admin - Conteúdo Adulto{% endblock %}
{% block extra_head %}
<style>
    .adult-page { max-width: 900px; margin: 0 auto; }
    .back-link {
        display: inline-flex; align-items: center; gap: 6px;
        color: var(--text-muted); text-decoration: none;
        font-size: 0.9em; font-weight: 500; margin-bottom: 20px;
    }
    .back-link:hover { color: var(--text-primary); }
    .adult-header h1 { font-size: 1.5em; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
    .adult-header p { color: var(--text-muted); font-size: 0.9em; margin-bottom: 24px; }
    .adult-section {
        background: var(--bg-card); border-radius: var(--radius-lg);
        padding: 24px; border: 1px solid var(--border); margin-bottom: 20px;
    }
    .adult-section h2 { font-size: 1.05em; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
    .adult-section .hint { font-size: 0.82em; color: var(--text-muted); margin-bottom: 14px; }
    .adult-section .hint button {
        background: none; border: none; color: var(--primary);
        cursor: pointer; font-size: 1em; text-decoration: underline; padding: 0;
    }
    .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
    .cat-item {
        display: flex; align-items: center; gap: 10px;
        background: var(--bg-surface); border: 1px solid var(--border);
        border-radius: var(--radius-md); padding: 10px 12px;
        font-size: 0.85em; color: var(--text-primary); cursor: pointer;
    }
    .cat-item input { width: 16px; height: 16px; accent-color: var(--primary); flex-shrink: 0; }
    .cat-item .count { margin-left: auto; color: var(--text-muted); font-size: 0.8em; flex-shrink: 0; }
    .cat-item.suggested { border-color: rgba(229,9,20,0.4); }
    .tag-sug {
        font-size: 0.7em; font-weight: 700; color: var(--primary);
        border: 1px solid rgba(229,9,20,0.4); border-radius: 100px;
        padding: 1px 7px; flex-shrink: 0;
    }
    .adult-empty { color: var(--text-muted); font-size: 0.85em; }
    .adult-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
</style>
{% endblock %}
{% block content %}
<div class="adult-page">
    <a href="{{ url_for('admin_panel') }}" class="back-link">&larr; Voltar ao Painel Admin</a>
    <div class="adult-header">
        <h1>🔞 Conteúdo Adulto</h1>
        <p>Selecione as categorias que devem ser tratadas como adultas. Usuários com o bloqueio ativado em <strong>Minha Conta</strong> não verão nem os itens nem essas categorias em Canais, Filmes e Séries.</p>
    </div>

    <form method="POST" action="{{ url_for('admin_adult') }}">
        {% for tipo, titulo in [('live', '📺 Canais'), ('movie', '🎬 Filmes'), ('series', '📺 Séries')] %}
        <div class="adult-section">
            <h2>{{ titulo }}</h2>
            <p class="hint">{{ cats[tipo]|length }} categoria(s) encontrada(s).
                <button type="button" onclick="autoSelect('{{ tipo }}')">marcar sugestões automáticas</button>
            </p>
            {% if cats[tipo] %}
            <div class="cat-grid">
                {% for c in cats[tipo] %}
                <label class="cat-item {% if c.suggested %}suggested{% endif %}">
                    <input type="checkbox" name="adult_categories" value="{{ c.name }}" data-tipo="{{ tipo }}" data-suggested="{{ 1 if c.suggested else 0 }}" {% if c.blocked %}checked{% endif %}>
                    <span>{{ c.name }}</span>
                    {% if c.suggested %}<span class="tag-sug">+18?</span>{% endif %}
                    <span class="count">{{ c.count }}</span>
                </label>
                {% endfor %}
            </div>
            {% else %}
            <p class="adult-empty">Nenhuma categoria encontrada.</p>
            {% endif %}
        </div>
        {% endfor %}

        <div class="adult-actions">
            <button type="submit" class="btn">💾 Salvar Categorias Adultas</button>
            <a href="{{ url_for('admin_panel') }}" class="btn btn-outline">Cancelar</a>
        </div>
        {% if adult_selected %}
        <p style="color:var(--text-muted); font-size:0.85em; margin-top:14px;">Atualmente bloqueadas ({{ adult_selected|length }}): {{ adult_selected|join(', ') }}</p>
        {% endif %}
    </form>
</div>
<script>
function autoSelect(tipo) {
    document.querySelectorAll('input[name="adult_categories"][data-tipo="' + tipo + '"][data-suggested="1"]').forEach(function(cb) {
        cb.checked = true;
    });
}
</script>
{% endblock %}