{% extends "base.html" %}
{% block title %}Login | BancaNet{% endblock %}
{% block content %}
<main class="auth-page">
  <div class="auth-stack">
    <section class="auth-card auth-card-split auth-card-login">
        <div class="auth-visual">
            <span class="eyebrow">Acceso seguro</span>
            <h1>Bienvenido</h1>
            <p>Entra con tu numero y contrasena. Si todavia no te registras, crea tu cuenta en unos segundos.</p>
        </div>

        <div class="auth-main">
            <div class="auth-brand">
              <img
                class="auth-brand-image"
                src="{{ url_for('static', filename='images/61981515.png') }}?v=4"
                alt="BancaNet"
                width="1672"
                height="941"
                decoding="async"
              >
            </div>
            <p class="auth-welcome-title">BIENVENIDO A BANCANET</p>
            <form method="post" class="auth-form" autocomplete="off"><input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <input type="text" name="playbot_dummy_user" class="sr-only" tabindex="-1" aria-hidden="true" autocomplete="username">
                <input type="password" name="playbot_dummy_pass" class="sr-only" tabindex="-1" aria-hidden="true" autocomplete="current-password">
                <label for="login-phone">
                    <span class="auth-label-title">
                        <span class="label-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" focusable="false">
                                <circle cx="12" cy="8" r="3.5"></circle>
                                <path d="M5.5 20c.5-4 2.7-6 6.5-6s6 2 6.5 6"></path>
                            </svg>
                        </span>
                        Numero de telefono
                    </span>
                    <input id="login-phone" type="tel" name="phone" inputmode="numeric" pattern="[0-9]*" placeholder="Tu numero de telefono" autocomplete="username" autocorrect="off" autocapitalize="off" spellcheck="false" autofocus required>
                </label>

                <label for="login-password">
                    <span class="auth-label-title">
                        <span class="label-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" focusable="false">
                                <circle cx="8" cy="12" r="4"></circle>
                                <path d="M12 12h8M17 12v3M20 12v2"></path>
                            </svg>
                        </span>
                        Contrasena
                    </span>
                    <div class="password-field">
                        <input id="login-password" type="password" name="password" maxlength="128" placeholder="Contraseña o PIN temporal" autocomplete="current-password" autocorrect="off" autocapitalize="off" spellcheck="false" aria-describedby="login-password-help" required>
                    </div>
                    <small id="login-password-help" class="field-help">Usa tu contraseña. Si la olvidaste, ingresa el PIN temporal que te dio soporte.</small>
                </label>

                <button type="submit"><span class="btn-mark">+</span> Iniciar sesion</button>
            </form>
            <p class="auth-switch">¿No tienes cuenta? <a href="{{ url_for('auth.register') }}">Crear cuenta</a></p>
        </div>
    </section>
  </div>
</main>
{% endblock %}