<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Scripts kit -->
    <script defer src="/javascripts/logic.js"></script>
    <script src="https://kit.fontawesome.com/7124061660.js" crossorigin="anonymous"></script>
    <!-- Styles -->
    <link rel="stylesheet" href="/stylesheets/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">    
    <title>MiPistaYa</title>
</head>
<!-- UNIR CON BACK -->
<body>
    <!-- MODAL -->
    <div class="modal fade" id="modalLogin" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered"  id="modalWidth" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="row">
                        <img src="/images/runner-login.png" class="d-md-flex col-md-6 col-lg-6 bg-image" alt="">
                        <div class="col-md-6">
                            <div class="login d-flex align-items-center py-5">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-md-11 mx-auto">
                                            <h3 class="login-heading mb-4">¡Bienvenido!</h3>
                                            <form method="post" action="/usuarios/login">
                                                <div class="form-floating mb-3">
                                                    <input type="email" class="form-control" id="floatingInput"
                                                        placeholder="name@example.com" name="email">
                                                    <label for="floatingInput">Dirección de correo</label>
                                                </div>
                                                <div class="form-floating mb-3">
                                                    <input type="password" class="form-control" id="floatingPassword"
                                                        placeholder="Password" name="password">
                                                    <label for="floatingPassword">Contraseña</label>
                                                </div>

                                                <div class="form-check mb-3">
                                                    <input class="form-check-input" type="checkbox" value=""
                                                        id="rememberPasswordCheck">
                                                    <label class="form-check-label" for="rememberPasswordCheck">
                                                        Recordar contraseña
                                                    </label>
                                                </div>

                                                <div class="d-grid">
                                                    <button
                                                        class="btn btn-lg btn-login text-uppercase fw-bold mb-2 bg-morado text-light"
                                                        type="submit">Iniciar sesión</button>
                                                    <div class="text-center">
                                                        <a class="small" href="#">He olvidado mi contraseña</a>
                                                    </div>
                                                </div>

                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- END MODAL -->
    <div class="container-fluid px-5">
        <!-- Menú -->
        <header>
            <nav class="navbar navbar-expand-lg container-fluid">
                <div class="container-fluid">
                    <a class="navbar-brand" href="/">
                        <img src="/images/Mi Pista Ya.png" alt="Logo Mi Pista Ya" class="w-25">
                    </a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                        data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                        aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto me-5 mb-2 mb-lg-0">
                            <li class="nav-item">
                                <a class="nav-link" href="reservas">Reservas 
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="">Pistas 
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="">Equipamiento
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="">Nosotros
                                </a>
                            </li>
                        </ul>
                        <form class="d-inline-flex" role="search">
                            <button class="btn" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseExample" aria-expanded="false"
                                aria-controls="collapseExample">
                                <i class="bi bi-search"></i>
                            </button>
                            <div class="collapse" id="collapseExample">
                                <input class="form-control me-2" type="search" placeholder="Buscar"
                                    aria-label="Search">
                            </div>
                        </form>
                        <a class="btn txt-morado">Registro
                        </a>
                        <a class="btn bg-morado text-light" data-bs-toggle="modal" data-bs-target="#modalLogin">Login
                        </a>
                    </div>
                </div>
            </nav>
        </header>
        <main class="container-fluid bg-morado p-5">
            <!-- Formulario de registro -->
            <section class="card shadow p-3 rounded mx-auto">
                <div class="row">
                    <!-- Apartado formulario -->
                    <div class="col-sm">
                        <form method="post" action="/usuarios">
                            <h1 class="text-center mb-4">Regístrate</h1>
                            <div class="d-sm-flex">
                                <div class="form-floating mb-2 me-2">
                                    <input type="text" id="nombre" class="form-control" placeholder="Nombre" name="nombre" />
                                    <label class="form-label" for="nombre">Nombre</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input type="text" id="apellidos" class="form-control" placeholder="Apellidos" name="apellidos"/>
                                    <label class="form-label" for="apellidos">Apellidos</label>
                                </div>
                            </div>
                            <div class="form-floating mb-2">
                                <input type="email" id="email" class="form-control" placeholder="Correo electrónico" name="email" />
                                <label class="form-label" for="email">Email</label>
                            </div>
                            <div class="d-sm-flex">
                                <div class="form-floating mb-2 me-2">
                                    <input type="text" id="dni" class="form-control" placeholder="DNI" name="dni"/>
                                    <label class="form-label" for="dni">DNI</label>
                                </div>
                                <div class="form-floating mb-2">
                                    <input type="text" id="telefono" class="form-control" placeholder="Número de teléfono" name="telefono" />
                                    <label class="form-label" for="telefono">Teléfono</label>
                                </div>
                            </div>
                            <div class="form-floating mb-2">
                                <input type="date" id="fecha_nacimiento" class="form-control" placeholder="Fecha de nacimiento" name="fecha_nacimiento"/>
                                <label class="form-label" for="fecha_nacimiento">Fecha de nacimiento</label>
                            </div>
                            <div class="form-floating mb-2">
                                <input type="text" id="direccion" class="form-control" placeholder="Dirección de residencia" name="direccion" />
                                <label class="form-label" for="direccion">Dirección</label>
                            </div>
                            <div class="d-sm-flex">
                                <div class="form-check form-switch mb-2 me-4">
                                    <input class="form-check-input" type="checkbox" role="switch" id="federado" name="federado">
                                    <label class="form-check-label" for="federado">Federado</label>
                                </div>
                                <select class="form-select form-select-sm mb-2" aria-label=".form-select-sm" id="rol" name="rol">
                                    <option selected>Selecciona un tipo de perfil</option>
                                    <option value="deportista">Usuario deportista</option>
                                    <option value="administrador">Administrador del sistema</option>
                                </select>
                            </div>
                            <div class="d-sm-flex">
                                <div class="form-floating mb-2 me-2">
                                    <input type="password" id="password" class="form-control" placeholder="Contraseña de acceso" name="password"/>
                                    <label class="form-label" for="password">Contraseña de acceso</label>
                                </div>
                                <div class="form-floating mb-4">
                                    <input type="password" id="confirmpassword" class="form-control" placeholder="Confirmación de contraseña de acceso" />
                                    <label class="form-label" for="confirmpassword">Confirmar contraseña</label>
                                </div>
                            </div>
                            <div class="mx-auto text-center">
                                <button type="reset" class="btn btn-secondary">Cancelar</button>
                                <button type="submit" class="btn bg-azul">Enviar</button>
                            </div>
                        </form>
                    </div>  
                    <!-- Apartado información -->
                    <div class="col-sm border-start border-2 text-center">
                        <img src="/images/Mi Pista Ya.png" alt="Logo Mi Pista Ya" class="w-50 my-5">
                        <p>¿Te gusta practicar deporte pero no tienes dónde?
                            En nuestro centro podrás encontrar la solución.
                            Solo tienes que registrarte y hacer la reserva de la pista que más te guste.
                            Ponemos a tu disposición equipamiento para el deporte que vayas a practicar.
                            No esperes más y apúntante a la aventura.
                        </p>
                    </div>
                </div>
            </section>
        </main>
        <!-- Footer -->
        <footer class="text-center border-top pt-2">
            <div class="row">
                <div class="col-sm">
                    <h6>Nosotros</h6>
                    <iframe class="w-75"
                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12684.986951386925!2d-6.162829129509961!3d37.36033823401792!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd12110e75b253f9%3A0x957b72dc37f7cbbf!2sLa%20Madruga!5e0!3m2!1ses!2ses!4v1674214902620!5m2!1ses!2ses" style="border:0;" allowfullscreen="" loading="lazy"
                        referrerpolicy="no-referrer-when-downgrade" title="Ubicación del polideportivo"></iframe>
                    <p class="text-muted mb-0">Calle Huelva. 41806, Umbrete, Sevilla</p>
                    <p class="text-muted mb-0">955 123 456</p>
                    <p class="text-muted mb-0">info@mipistaya.es</p>
                </div>
                <div class="col-sm">
                    <div class="mx-auto text-center">
                        <img src="/images/Mi Pista Ya.png" alt="Logo Mi Pista Ya" class="w-100">
                        <p class="text-muted">© Copyright 2023 MiPistaYa</p>
                    </div>
                </div>
                <div class="col-sm">
                    <h6>Síguenos</h6>
                    <!-- Iconos RRSSS -->
                    <div class="my-3">
                        <a href="http://www.facebook.com" target="_blank" class="txt-morado h2 m-1 bi bi-facebook" title="Facebook"></a>
                        <a href="http://www.instagram.com" target="_blank" class="txt-morado h2 m-1 bi bi-instagram" title="Instagram"></a>
                        <a href="http://www.twitter.com" target="_blank" class="txt-morado h2 m-1 bi bi-twitter" title="Twitter"></a>
                        <a href="http://www.tiktok.com" target="_blank" class="txt-morado h2 m-1 bi bi-tiktok" title="Tiktok"></a>    
                    </div>
                    <a href="">Política de privacidad</a>
                </div>
            </div>
        </footer>
    </div>
    <!-- JS Bootstrap -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous">
    </script>
</body>
</html>