{% extends "auth_base.html" %}

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

{% block content %}
<div style="text-align: center; margin-bottom: 2rem;">
    <img src="{{ url_for('static', filename='img/voxmanu_logo.jpg') }}" alt="VoxManu Logo" style="width: 75px; height: 75px; border-radius: 16px; margin-bottom: 0.75rem; object-fit: cover;">
    <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; box-sizing: border-box;">
    </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; box-sizing: border-box;">
    </div>

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