{% extends "base.html" %}

{% block title %}Registro de Usuario{% endblock %}

{% block content %}


<div class="d-flex align-items-center p-3 border-bottom border-light-subtle">
    <div class="col-11 col-md-8 col-lg-5 p-3">
            <h4 class="text-muted fw-semibold mb-2 text-start">Crea tu cuenta</h4>
            <p class="text-muted mb-3 text-start" style="text-align: justify;">
                    Regístrate para acceder a todas las funcionalidades de nuestra plataforma.
                </p>
            <form action="{{ url_for('signup', company_short_name=company_short_name) }}" method="post" >
            <div class="mb-3 ">
                <label for="email" class="form-label text-secondary">Correo Electrónico</label>
                <input type="email" autocomplete="off" id="email" name="email"
                       class="form-control" required
                       value="{{ form_data.email if form_data else '' }}">
            </div>

    {% if is_mobile %}
        <!-- En móvil, cada input ocupa una fila -->
        <div class="mb-3">
            <label for="first_name" class="form-label text-secondary">Nombre</label>
            <input type="text" id="first_name" name="first_name"
                   class="form-control" required
                   value="{{ form_data.first_name if form_data else '' }}">
        </div>
        <div class="mb-3">
            <label for="last_name" class="form-label text-secondary">Apellido</label>
            <input type="text" id="last_name" name="last_name"
                   class="form-control" required
                   value="{{ form_data.last_name if form_data else '' }}">
        </div>
    {% else %}
            <div class="row">
        <!-- En escritorio, los inputs están en la misma fila -->
        <div class="col-md-6 mb-3">
            <label for="first_name" class="form-label text-secondary">Nombre</label>
            <input type="text" id="first_name" name="first_name"
                   class="form-control" required
                   value="{{ form_data.first_name if form_data else '' }}">
        </div>
        <div class="col-md-6 mb-3">
            <label for="last_name" class="form-label text-secondary">Apellido</label>
            <input type="text" id="last_name" name="last_name"
                   class="form-control" required
                   value="{{ form_data.last_name if form_data else '' }}">
        </div>
    </div>

    {% endif %}

            <div class="mb-3">
                <label for="password" class="form-label text-secondary">Contraseña</label>
                <input type="password" id="password" name="password" class="form-control" required>
                <small class="form-text text-muted">
                        La contraseña debe contener al menos 8 caracteres, una letra mayúscula, una letra minúscula, un número y un carácter especial.
                </small>

            </div>
            <div class="mb-3">
                <label for="confirm_password" class="form-label text-secondary">Confirmar Contraseña</label>
                <input type="password" id="confirm_password" name="confirm_password" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary w-100">Registrarse</button>
        </form>
        <!-- Nota sobre privacidad -->
        <p class="text-muted small mb-0 text-start mt-3" style="text-align: justify;">
        🔒 Valoramos tu privacidad. Tus datos serán utilizados exclusivamente para brindarte una mejor experiencia
        y no serán compartidos con terceros sin tu consentimiento. Para más información, consulta nuestra
        <a href="#" class="text-decoration-none fw-semibold">Política de Privacidad</a>.
        </p>
    </p>
    </div>
</div>
{% endblock %}