<?php
    if (file_exists("./content/header.php")){
        include_once("./content/header.php");
    }
?>

<div class="pageCnt">
    <div class="centerCell">
        <div class="register-card content">
            <div>
                <h1 class="register-title" id="register">Registro</h1>
            </div>
            <div class="register-timeline">
                <div class="term-and-conditions">
                    <div class="white-space-left"></div>
                    <i class="fas fa-check check-done check-icon"></i>
                    <h6 class="text-timeline poppins-bold" id="register1">Términos y Condiciones</h6>
                </div>
                <div class="access-data">
                    <i class="fas fa-check check check-icon"></i>
                    <h6 class="text-timeline poppins-bold" id="register2">Datos de Acceso</h6>
                </div>
                <div class="verification-number">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium" id="register3">Número de Verificación</h6>
                </div>
                <div class="login-app">
                    <i class="fas fa-check no-check check-icon"></i>
                    <h6 class="text-timeline poppins-medium" id="register4">Ingreso a la Aplicación</h6>
                    <div class="white-space-right"></div>
                </div>
            </div>
            
            <div class="title-register">
                <h3 class="poppins-bold" id="titleRegister">Datos de Acceso</h3>
            </div>
            
            <div class="register-form-div">
                <div class="email-form" id="emai-form">
                    <p class="poppins-bold" id="emailLabel">Email</p>
                    <input type="email" name="email" autocomplete="new-email" placeholder="Ej: nombre@micorreo.com" class="user-input form-input poppins-regular" id="email">
                    <p class="poppins-regular error" id="euser"></p>
                </div>
                <div class="password-form">
                    <div class="password-left inptCnt">
                        <p class="poppins-bold" id="passwordLabel">Contraseña</p>
                        <input type="password" name="password" autocomplete="new-password" class="password-input form-input" id="password">
                        <div class="inptIc" id="epass">
                           <i class="far fa-eye-slash" id="iconEye"></i>
                        </div>
                        <p class="poppins-regular error pw" id="epassword"></p>
                    </div>
                    <div class="password-right inptCnt">
                        <p class="poppins-bold" id="confirmPasswordLabel">Confirmar Contraseña</p>
                        <input type="password" autocomplete="new-password" name="password" class="password-input form-input" id="confirmPassword">
                        <div class="inptIc" id="econf">
                           <i class="far fa-eye-slash" id="iconEyeConfirm"></i>
                        </div>
                        <p class="poppins-regular error pw" id="econfirm"></p>
                    </div>
                </div>
            </div>
            
            <div class="buttons">
                <div id="previous"><button type="submit" id="previous-button" class="cancel-button poppins-medium whiteButton">ANTERIOR</button></div>
                <div id="next"><button type="submit" id="next-button" class="accept-button poppins-medium blueButton">SIGUIENTE</button></div>
            </div>
        </div>
    </div>
</div>