<%- include("template/cabecera.ejs", {tituloWeb: "Lista de Libros" })%>

  <div class="container">
    <!-- Será el listado de libros -->
    <div class="container">
      <h1 class="p-5 text-center">Todos los libros</h1>
      <h5 class="pb-5 text-center">Si eres un amante de la lectura y necesitas encontrar un libro por su título, ¡estás en el lugar correcto!</h5>
      <div class="row">
        <% if (arrayLibro.length> 0) { %>
          <% arrayLibro.forEach(libro=> { %>
            <div class="col-md-4 mb-3">
              <div class="card">
                <div class="row g-0">
                  <div class="col-md-4">
                    <img src="../images/portada-generica.c.jpg" class="card-img img-fluid rounded-start" alt="portada">
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <a href="libros/<%= libro.id %>"><img id="img-editar" src="../images/editar.png" alt="editar"></a>
                      <h5 class="card-title">
                        <%= libro.titulo %>
                      </h5>
                      <p class="card-text">
                        <%= libro.autor %>
                      </p>
                      <p class="card-text">
                        <%= libro.genero %>
                      </p>
                      <p class="card-text"><small class="text-muted">Número de páginas: <%= libro.paginas %></small>
                      </p>

                    </div>
                  </div>
                </div>
              </div>
            </div>
            <% }); %>
              <% } %>
      </div>
      <% //if (usuario.admin=="si" ) {%>
        <a class="btn btn-success my-4" href="/libros/crear">Crear nuevo libro</a>
        <% //} %>
    </div>
  </div>

  <%- include("template/footer.ejs")%>