<%- include('template/cabecera', {tituloWeb: "Panel de Administración"})%>

<div class="container">
  <h1>POKEMON</h1>
  <a class="btn btn-success btn-block my-4" href="/pokemon/crear">CREAR NUEVO POKEMON</a>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Nombre</th>
        <th scope="col">Tipo</th>
        <th scope="col">Descripción</th>
        <th scope="col">Editar</th>
        <th scope="col">Eliminar</th>
      </tr>
    </thead>
    <tbody>
      <% if(arrayPokemon.length > 0){ %> <% arrayPokemon.forEach(pokemon => { %>
      <tr>
        <th scope="row"><%= pokemon.id %></th>
        <td><%= pokemon.nombre %></td>
        <td><%= pokemon.tipo %></td>
        <td><%= pokemon.descripcion %></td>
        <td><a class="btn btn-warning btn-sm" href="pokemon/<%= pokemon._id %>">Editar</a></td>
        <td><button class="btn btn-danger btn-sm" data-id="<%= pokemon._id %>" onclick="borrar(this)">Eliminar</button></td>
      </tr>
      <tr>
        <% })} %>
      </tr>
    </tbody>
  </table>
</div>

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

<script>
 async function borrar(btnEliminar){
    console.log(btnEliminar.dataset.id)
    try {
      const data = await fetch(`/pokemon/${btnEliminar.dataset.id}` , {
        method: 'delete'
      })
      const res = await data.json()
      console.log(res)
      if(res.estado){
        window.location.href = '/pokemon'
      }else{
        console.log(res)
      }
    }catch(error){
      console.log(error)
    }
 }
</script>
