{% extends "base.html" %}

{% block content %}
<div class="container d-flex align-items-center justify-content-center" style="min-height: 70vh;">
    <div class="card bg-dark border-cyan glass-effect p-5" style="max-width: 450px; width: 100%;">
        <div class="text-center mb-4">
            <i class="bi bi-shield-lock-fill text-purple mb-3" style="font-size: 3rem;"></i>
            <h2 class="text-cyan font-syncopate">Acesso Restrito</h2>
            <p class="text-secondary">Insira sua Chave Privada de Administrador para prosseguir.</p>
        </div>

        <form method="POST">
            {% csrf_token %}
            <div class="mb-4">
                <input type="password" name="access_key" class="form-control bg-transparent text-white border-purple p-3" placeholder="Sua Chave Privada..." required>
            </div>
            <button type="submit" class="btn btn-cyan w-100 p-3 shadow-neon">
                Validar Identidade <i class="bi bi-chevron-right"></i>
            </button>
        </form>

        <div class="mt-4 text-center">
            <a href="{% url 'home' %}" class="text-secondary text-decoration-none small">
                <i class="bi bi-arrow-left"></i> Voltar para o Painel Público
            </a>
        </div>
    </div>
</div>

<style>
    .border-cyan { border: 1px solid var(--electric-cyan) !important; }
    .border-purple { border: 1px solid var(--neon-purple) !important; }
    .shadow-neon:hover {
        box-shadow: 0 0 20px var(--electric-cyan);
        transform: translateY(-2px);
    }
    .font-syncopate { font-family: 'Syncopate', sans-serif; }
</style>
{% endblock %}
