{% extends "auth_base.html" %}

{% block title %}Login — {{ app_name }}{% endblock %}

{% block content %}
<div style="text-align: center; margin-bottom: 2rem;">
    <img src="{{ url_for('static', filename='img/voxmanu_logo.jpg') }}" alt="Logo VoxManu" style="width: 85px; height: 85px; border-radius: 18px; box-shadow: 0 8px 20px rgba(15,42,74,0.15); margin-bottom: 0.75rem; object-fit: cover;">
    <h2 style="color: #123B6D; font-weight: 800; font-size: 1.6rem; margin-bottom: 0.25rem;">{{ app_name }}</h2>
    <p style="color: #5A6E85; font-size: 0.9rem;">{{ app_subtitle }}</p>
</div>

<form method="POST" action="{{ url_for('auth.login') }}">
    <div style="margin-bottom: 1.25rem;">
        <label style="display: block; font-weight: 600; color: #243447; margin-bottom: 0.5rem; font-size: 0.9rem;">CPF ou E-mail do Usuário</label>
        <input type="text" name="login_input" required placeholder="Digite seu CPF ou E-mail" style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 0.95rem; outline: none; box-sizing: border-box;">
    </div>
    
    <div style="margin-bottom: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
            <label style="font-weight: 600; color: #243447; font-size: 0.9rem;">Senha de Acesso</label>
            <a href="{{ url_for('auth.esqueci_senha') }}" style="color: #1976D2; font-size: 0.8rem; font-weight: 600; text-decoration: none;">Esqueceu a senha?</a>
        </div>
        <input type="password" name="senha" required placeholder="••••••••" style="width: 100%; padding: 0.75rem 1rem; border: 1px solid #CBD5E1; border-radius: 8px; font-size: 0.95rem; outline: none; 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;">
        ENTRAR NO SISTEMA
    </button>
</form>
{% endblock %}