<%- include("../template/cabecera") %>
<div class="container">
    <!--Si existen elementos en el array de Manga-->
    <% if (arrayManga.length > 0) { %>
     <!--Haremos el foreach para recorrer el array-->
     <% arrayManga.forEach(manga => { %>
       <!--Aquí podremos mostrar todos los pokemon en una tabla-->
     <% }) %>
    <% } %>
</div>
<div class="container ">
    <h1 class="d-flex flex-row justify-content-center alig-items-center">Mangas</h1>
    <a  class="btn btn-danger m-2 d-flex flex-row justify-content-center alig-items-center" href="/manga/crear">Añadir manga</a>
    <div class="table-responsive-sm table-responsive-md">
      <table class="table table-hover table-light">
          <thead>
              <tr class="table-dark">
                <th scope="col">Título</th>
                <th scope="col">Autor</th>
                <th scope="col">Número de páginas</th>
                <th scope="col">Editorial</th>
                <th scope="col">Categoría</th>
                <th scope="col">Tipo de tapa</th>
                <th scope="col">Tamaño</th>
                <th scope="col">Precio</th>
                <th scope="col">Opciones</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                  <% if (arrayManga.length>0) {%>
                      <% arrayManga.forEach(manga =>{ %>
                <td><%= manga.titulo  %></td>
                <td><%= manga.autor  %></td>
                <td><%= manga.numPagina  %></td>
                <td><%= manga.editorial  %></td>
                <td><%= manga.categoria  %></td>
                <td><%= manga.tipoTapa  %></td>
                <td><%= manga.tamanio  %></td>
                <td><%= manga.precio  %></td>
                <td><a class="btn btn-warning btn-sm" href="/manga/<%= manga.id %>">Editar/Eliminar</a></td>
              
              </tr>
              <% }) %>
              <% } %>
            </tbody>
      </table>
  </div>

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