<div class="container-fluid vh-100 d-flex align-items-center justify-content-center">
    <div class="row mx-0 login-box">

        <!-- COLUMNA IZQUIERDA -->

        <div class="col-lg-6 col-md-6 d-flex flex-column justify-content-center text-white p-5"
            style="background: linear-gradient(135deg, #0f172a, #1e3a5f, #3b82b8); border-radius: 16px 0 0 16px;">

            <div class="text-center mb-4">
                <img src="imgs/logo.png" alt="ByteCenter" style="width: 120px;">
            </div>

            <h1 class="fw-bold text-center text-white">
                <a href="?opt=login" class="text-decoration-none fw-semibold text-white">
                    ByteCenter
                </a>
            </h1>

            <p class="mt-3 fs-5 text-center">
                ¿Éres administrador y olvidaste tu contraseña?
                <br>Te enviaremos un código para recuperarla.
            </p>

        </div>

        <!-- COLUMNA DERECHA -->

        <div class="col-lg-6 col-md-6 d-flex align-items-center p-5 bg-white" 
            style="border-radius: 0 16px 16px 0;">
            
            <div class="w-100">

                <h4 class="text-center mb-4">Recuperar Contraseña</h4>

                <p class="text-muted text-center mb-4">
                    Ingresá tu email y te enviaremos un código de verificación.
                </p>

                <!-- FORMULARIO -->

                <form method="POST" action="?opt=recuperar_cuenta" novalidate>

                    <!-- CSRF -->

                    <input type="hidden" name="csrf_token" value="<?= $_SESSION['csrf_token'] ?>">

                    <!-- EMAIL -->

                    <div class="form-floating mb-4">
                        <input type="email" name="email" class="form-control input-lg" placeholder="nombre@mail.com" required>
                        <label for="floatingEmailInput">Correo electrónico</label>
                    </div>

                    <!-- BOTONES -->

                    <div class="d-flex flex-column gap-2">

                        <button type="submit" class="btn btn-primary btn-lg w-100">
                            Enviar código
                        </button>

                        <a href="?opt=login" class="btn btn-secondary text-center mt-4">
                            Volver al login
                        </a>

                    </div>

                </form>
                
                <!-- ERROR -->

                <script>
                    const serverErrors = <?php 
                        if (!empty($_SESSION['flash_error'])) {
                            $errorsArray = explode('<br>', $_SESSION['flash_error']);
                            unset($_SESSION['flash_error']);
                            echo json_encode($errorsArray);
                        } else {
                            echo '[]';
                        }
                    ?>;
                </script>

                <!-- SUCCES -->

                <script>
                    const serverSuccess = <?php
                        if (!empty($_SESSION['flash_success'])) {
                            $successArray = explode('<br>', $_SESSION['flash_success']);
                            unset($_SESSION['flash_success']);
                            echo json_encode($successArray);
                        } else {
                            echo '[]';
                        }
                    ?>;
                </script>
                
            </div>
        </div>
    </div>
</div>

<script src="js/login/logInValidator.js"></script>