<!DOCTYPE html>
<html data-bs-theme="light" lang="es-mx">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Formulario de registro</title>
    <link rel="stylesheet" href="../css/formularios.css">
</head>

<body>
<div style="background-color: #211b52;"><img src="assets/img/logo-lania-w.png" style="height: 5rem;margin: 0px 10px;"></div>
    <div class="card">
        <div class="card-body" style="margin: 0px 30px;">

            <!-- ==================== Formulario ==================== -->
            <form style="margin: 0px 10%;" id="formulario-datos-basicos" action="" method="POST">
                <h3>Registro</h3>
                <label class="form-label" for="nombres" style="margin: 10px 0px 5px;">Nombre</label>
                <input class="border rounded border-dark-subtle form-control" type="text" id="nombres" placeholder="Nombre/s" required="">

                <label class="form-label" for="primer_apellido" style="margin: 10px 0px 5px;">Primer apellido</label>
                <input class="border rounded border-dark-subtle form-control" type="text" id="primer_apellido" placeholder="Primer apellido" required="">

                <label class="form-label" for="segundo_apellido" style="margin: 10px 0px 5px;">Segundo apellido</label>
                <input class="border rounded border-dark-subtle form-control" type="text" id="segundo_apellido" placeholder="Segundo apellido">

                <label class="form-label" for="correo" style="margin: 10px 0px 5px;">Correo electrónico</label>
                <input class="border rounded border-dark-subtle form-control" type="email" id="correo" required="" placeholder="usuario@ejemplo.com">

                <label class="form-label" for="telefono" style="margin: 10px 0px 5px;">Teléfono</label>
                <input class="border rounded border-dark-subtle form-control" type="tel" id="telefono" placeholder="10 digitos de su número de teléfono" minlength="9" maxlength="10" required="">

                <label class="form-label" for="id_examen" style="margin: 10px 0px 5px;">Examen</label>
                <select class="border rounded border-dark-subtle form-select" id="id_examen" required="">
                    <option value="NULL">Seleccione una opción</option>
                </select>

                <label class="form-label" for="id_genero" style="margin: 10px 0px 5px;">Género</label>
                <select class="border rounded border-dark-subtle form-select" id="id_genero" required="">
                    <option value="NULL">Seleccione una opción</option>
                    <option value="1">Masculino</option>
                    <option value="2">Femenino</option>
                    <option value="3">Prefiero no decir</option>
                </select>

                <label class="form-label" for="id_rango_edad" style="margin: 10px 0px 5px;">Rango de edad</label>
                <select class="border rounded border-dark-subtle form-select" id="id_rango_edad" required="">
                    <option value="NULL">Seleccione una opción</option>
                </select>


                <label class="form-label" for="id_tipo_id" style="margin: 10px 0px 5px;">Tipo de identificación</label>
                <select class="border rounded border-dark-subtle form-select" id="id_tipo_id" required="">
                    <option value="NULL">Seleccione una opción</option>
                </select>
                
                <input class="btn border rounded-3 border-3 border-primary-subtle w-100" type="submit" value="Enviar" style="margin: 15px 0px;background-color: #35245b;color: white;" name="btnEnviar">            </form>
            <!-- ==================== Fin del formulario ==================== -->
            <div id="mensaje-error"></div>
        </div>
    </div>
    <script src="../js/formulario-candidato.js"></script>
</body>

</html>