{% extends "base.html" %}
{% block content %}
<div class="container mt-5 pt-5">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{% url 'admin_dashboard' %}">Painel</a></li>
            <li class="breadcrumb-item active">{{ lottery.get_name_display }}</li>
        </ol>
    </nav>

    <div class="card-glass p-4 mb-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h2>Editor: {{ lottery.get_name_display }}</h2>
                <p class="text-muted">Selecione os números para <strong>ANULAR</strong> ou use a IA.</p>
            </div>
            <div class="text-end">
                <a href="{% url 'ai_predict' lottery.id %}" class="btn btn-warning mb-1">
                    <i class="fas fa-robot"></i> Auto-Previsão IA Rotativa
                </a>
                <br>
                <small class="text-warning" style="font-size: 0.75rem;">Recalcula Verdes ignorando Anulados</small>
            </div>
        </div>

        <form method="post">
            {% csrf_token %}
            <div class="lottery-grid mb-4">
                {% for n in numbers %}
                <div class="form-check number-toggle">
                    <input class="form-check-input d-none" type="checkbox" name="numbers" value="{{ n }}" id="num_{{ n }}" {% if n in annulled %}checked{% endif %}>
                    <label class="number-ball {% if n in annulled %}annulled{% endif %}" for="num_{{ n }}">
                        {{ n|stringformat:"02d" }}
                    </label>
                </div>
                {% endfor %}
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-brand btn-lg">Salvar Configurações</button>
            </div>
        </form>
    </div>
</div>

<style>
    .lottery-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        gap: 15px;
        background: rgba(255,255,255,0.05);
        padding: 20px;
        border-radius: 15px;
    }
    .number-ball {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        background: #0b1f2a;
        color: white;
        cursor: pointer;
        transition: all 0.3s;
        border: 2px solid rgba(255,255,255,0.1);
        font-weight: bold;
    }
    .number-ball:hover {
        background: #0f766e;
        transform: scale(1.1);
    }
    .number-toggle input:checked + .number-ball {
        background: #dc3545 !important; /* Vermelho real para Anulado */
        border-color: #fff;
        box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
    }
</style>
{% endblock %}