{% extends "base.html" %}
{% block title %}Register | BancaNet{% endblock %}
{% block content %}
<main class="auth-page">
  <div class="auth-stack">
    <section class="auth-card auth-card-split auth-card-register">
        <div class="auth-visual">
            <span class="eyebrow">Nuevo acceso</span>
            <h1>Registrarte</h1>
            <p>Crea tu acceso una sola vez. Al terminar, entras directo a tu panel sin volver a meter tus datos.</p>
            <div class="auth-visual-badge">
                <strong>BancaNet</strong>
                <span>Inversion digital con acceso rapido, limpio y pensado para movil.</span>
            </div>
        </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() }}">
                <label for="register-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="register-phone" type="tel" name="phone" inputmode="numeric" pattern="[0-9]*" placeholder="Tu numero de telefono" autocomplete="tel" autofocus required>
                </label>

                <label for="register-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="register-password" type="password" name="password" minlength="6" maxlength="128" placeholder="Mínimo 6 caracteres" autocomplete="new-password" aria-describedby="register-password-help" required>
                    </div>
                    <small id="register-password-help" class="field-help">Mínimo 6 caracteres. Puedes usar letras y números.</small>
                </label>

                <label>
                    <span class="auth-label-title">
                        <span class="label-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" focusable="false">
                                <path d="M4 7.5h16v9H4z"></path>
                                <path d="M8 7.5a2 2 0 0 0-4 0M8 16.5a2 2 0 0 1-4 0M16 7.5a2 2 0 0 1 4 0M16 16.5a2 2 0 0 0 4 0"></path>
                                <path d="M12 10v4"></path>
                            </svg>
                        </span>
                        Codigo de invitacion
                    </span>
                    <input type="text" name="referral_code" value="{{ referral_code or '' }}" placeholder="Codigo de invitacion" autocomplete="off">
                </label>

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