<!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">
    <title>Registro Libro</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
</head>
<body>
    <div id="container-fluid px-0">
        <!-- START NAV-->
        <nav class="navbar navbar-expand-sm navbar-dark bg-dark mx-0">
            <div class="container-fluid">
                <div class="col-md-3">
                <a class="navbar-brand" href="/"><img src="/images/logo.png" id="logo" alt=""></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mynavbar">
                    <span class="navbar-toggler-icon"></span>
                </button>
                </div>
                <div class="col-sm-1 collapse navbar-collapse" id="mynavbar">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                    <a class="nav-link text-white" href="javascript:void(0)">Inicio</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link text-white" href="javascript:void(0)">Categorías</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link text-white" href="javascript:void(0)">Sobre Nosotros</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link text-white" href="/register">Registro</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/registerLibro">Registro Libro</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="/registerPrestamo">Prestamos</a>
                    </li>
                </ul>
                </div>
                <div class="col-sm">
                <form class="d-flex text-dark">
                    <button class="btn btn-login btn-outline-light rounded-pill me-2 text-white" type="button"><a href="/login" class="link-light">Login</a></button>
                    <input class="form-control me-2 rounded-pill" type="text" placeholder="Search">
                    <button class="btn btn-outline-light rounded-pill" type="button">Search</button>
                </form>
                </div>
            </div>
        </nav>
        <!-- END NAV-->
        <!-- START MAIN-->
        <div class="row justify-content-center py-lg-5 mainRegister">
            <div class="col-md-6 py-4 containerForm">
                <h1 class="mb-3 text-center"><%= title %> </h1>
                <form class="needs-validation px-3" method="post" action="/libros" novalidate>
                    <div class="row justify-content-around my-2">
                        <div class="col-md-5">
                            <label for="titulo" class="form-label">Titulo</label>
                            <input type="text" class="form-control rounded-pill" name="titulo" id="titulo" value=""
                                required>
                        </div>
                        <div class="col-md-5">
                            <label for="isbn" class="form-label">ISBN</label>
                            <input type="text" name="isbn" class="form-control rounded-pill" id="isbn" value=""
                                required>
                        </div>
                    </div>
                    <div class="row justify-content-around my-2">
                        <div class="col-md-5">
                            <label for="autor" class="form-label">Autor</label>
                            <input type="text" name="autor" class="form-control rounded-pill" id="autor"value=""
                                required>
                        </div>
                        <div class="col-md-5">
                            <label for="genero" class="form-label">Genero</label>
                            <input type="text" name="genero" class="form-control rounded-pill" id="genero" 
                                value="" required>
                        </div>
                    </div>
                    <div class="row justify-content-around my-2">
                        <div class="col-md-5">
                            <label for="editorial" class="form-label">Editorial</label>
                            <input type="text" name="editorial" class="form-control rounded-pill" id="editorial"
                                value="" required>
                        </div>
                        <div class="col-md-5">
                            <label for="anyo_public" class="form-label">Año Publicacion</label>
                            <div class="input-group has-validation">
                                <input type="text" name="anyo_public" class="form-control rounded-pill" id="anyo_public"
                                required>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-around my-2">
                        <div class="col-md-5">
                            <label for="location" class="form-label">Estado</label>
                            <div class="input-group has-validation">
                                <input type="text" name="location" class="form-control rounded-pill" id="location" placeholder="Dirección">
                            </div>
                        </div>
                    </div>
                    <hr class="my-4">
                    <div class="row justify-content-center my-2">
                        <div class="col-md-3">
                            <button class="btn btn-success btn-lg rounded-pill" type="submit">Register</button>
                        </div>
                        <div class="col-md-3">
                            <button class="btn btn-danger btn-lg rounded-pill" type="reset">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- START MAIN-->
        <!--START FOOTER-->
        <footer class="bg-dark text-center text-white">
            <!-- Grid container -->
            <div class="container p-4">
                <!-- Section: Social media -->
                <section class="mb-4">
                <!-- Facebook -->
                <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                    ><i class="bi bi-facebook"></i
                ></a>
                <!-- Twitter -->
                <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                    ><i class="bi bi-twitter"></i
                ></a>
                <!-- Google -->
                <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                    ><i class="bi bi-google"></i
                ></a>
                <!-- Instagram -->
                <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                    ><i class="bi bi-instagram"></i
                ></a>
                <!-- Linkedin -->
                <a class="btn btn-outline-light btn-floating rounded-pill m-1" href="#!" role="button"
                    ><i class="bi bi-linkedin"></i
                ></a>
                </section>
                <!-- Section: Social media -->
                <!-- Section: Form -->
                <section class="">
                <form action="">
                    <!--Grid row-->
                    <div class="row d-flex justify-content-center">
                    <!--Grid column-->
                    <div class="col-auto">
                        <p class="pt-2">
                        <strong>SUBSCRIBE</strong>
                        </p>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-md-5 col-12">
                        <!-- Email input -->
                        <div class="form-outline form-white mb-4">
                        <input type="email" id="form5Example21" class="form-control rounded-pill" placeholder="Email adress" />
                        </div>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-auto">
                        <!-- Submit button -->
                        <button type="submit" class="btn btn-outline-light rounded-pill mb-4">
                        Subscribe
                        </button>
                    </div>
                    <!--Grid column-->
                    </div>
                    <!--Grid row-->
                </form>
                </section>
                <!-- Section: Form -->
                <hr class="text-white px-0">
                <!-- Section: Links -->
                <section class="pb-0">
                <!--Grid row-->
                <div class="row">
                    <!--Grid column-->
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Categorias</h5>
                    <ul class="list-unstyled mb-0">
                        <li>
                        <a href="#!" class="text-white fw-light">Fantasia</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Novela Histórica</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Drama</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">...</a>
                        </li>
                    </ul>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Secciones</h5>
                    <ul class="list-unstyled mb-0">
                        <li>
                        <a href="#!" class="text-white fw-light">Inicio</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Categorias</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Registro</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Sobre Nosotros</a>
                        </li>
                    </ul>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Utils</h5>
                    <ul class="list-unstyled mb-0">
                        <li>
                        <a href="#!" class="text-white fw-light">Preguntas frecuentes</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Terminos de política</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Gestión de datos</a>
                        </li>
                        <li>
                        <a href="#!" class="text-white fw-light">Servicio técnico</a>
                        </li>
                    </ul>
                    </div>
                    <!--Grid column-->
                    <!--Grid column-->
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                    <h5 class="text-uppercase">Contáctanos</h5>
                    <ul class="list-unstyled mb-0">
                        <li class="pb-1">
                        <i class="bi bi-house-door-fill pr-1"></i>
                        <a href="#!" class="text-white fw-light">C/ localizacion, 4, 5D</a>
                        </li>
                        <li class="pb-1">
                        <i class="bi bi-envelope-at-fill pr-1"></i>
                        <a href="#!" class="text-white fw-light">example@email.com</a>
                        </li>
                        <li>
                        <i class="bi bi-telephone-fill pr-1"></i>
                        <a href="#!" class="text-white fw-light">+34 999-999-999</a>
                        </li>
                    </ul>
                    </div>
                    <!--Grid column-->
                </div>
                <!--Grid row-->
                </section>
                <!-- Section: Links -->
            </div>
            <!-- Grid container -->
            <hr class="text-white px-0">
            <!-- Copyright -->
            <div class="text-center p-3 pt-0">
                © 2020 Copyright:
                <a class="text-white" href="http://www.iesalixar.org/">I.E.S Alixar</a>
            </div>
            <!-- Copyright -->
            </footer>
        <!--END FOOTER-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
</body>

</html>