{% extends "base.html" %}

{% block title %}Primeiro Acesso — Criar Nova Senha — {{ app_name }}{% endblock %}

{% block content %}
<div style="max-width: 480px; margin: 3rem auto; background: #FFFFFF; padding: 2.5rem; border-radius: 16px; border: 1px solid #E2E8F0; box-shadow: 0 10px 25px rgba(0,0,0,0.08);">
    <div style="text-align: center; margin-bottom: 2rem;">
        <div style="font-size: 3rem; margin-bottom: 0.5rem;">🔒</div>
        <h2 style="color: #123B6D; font-weight: 800; font-size: 1.4rem; margin-bottom: 0.25rem;">Primeiro Acesso ao Sistema</h2>
        <p style="color: #5A6E85; font-size: 0.88rem;">Olá, <strong>{{ usuario.nome }}</strong>! Escolha uma nova senha pessoal de sua preferência para continuar.</p>
    </div>

    <form method="POST" action="{{ url_for('auth.primeiro_acesso') }}">
        <div style="margin-bottom: 1.25rem;">
            <label style="display: block; font-weight: 600; color: #243447; margin-bottom: 0.5rem; font-size: 0.9rem;">Nova Senha Pessoal *</label>
            <input type="password" name="nova_senha" required placeholder="•••••••• (mínimo 6 caracteres)" style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 0.95rem;">
        </div>

        <div style="margin-bottom: 1.75rem;">
            <label style="display: block; font-weight: 600; color: #243447; margin-bottom: 0.5rem; font-size: 0.9rem;">Confirmar Nova Senha *</label>
            <input type="password" name="confirmar_senha" required placeholder="••••••••" style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 0.95rem;">
        </div>

        <button type="submit" class="btn-primary-orange" style="width: 100%; justify-content: center; padding: 0.85rem; font-size: 1rem;">
            SALVAR NOVA SENHA E ENTRAR
        </button>
    </form>
</div>
{% endblock %}