<%- include('template/cabecera', {tituloWeb: "Detalle"})%>
<div class="container">
  <h1>Detalles del Pok√©mon</h1>
  <% if (error) { %> <%= mensaje %>
  <a href="/pokemon" class="btn btn-dark btn-block my-2"> Volver</a>
  <% } %> <% if (!error) { %>
    <form id="editar" data-id="<%= pokemon._id %>" class="my-2" method="POST">
      <input type="number" placeholder="<%= pokemon.id %>" class="form-control my-2" name="id" >
      <input
        type="text"
        placeholder="<%= pokemon.nombre %>"
        class="form-control my-2"
        name="nombre"
      />
      <input
        type="text"
        placeholder="<%= pokemon.tipo %>"
        class="form-control my-2"
        name="tipo"
      />
      <input
        type="text"
        placeholder="<%= pokemon.descripcion %>"
        class="form-control my-2"
        name="descripcion"
      />
      <button type="submit" class="btn btn-success btn-sm" type="submit">Actualizar</button>
    </form>
  <% } %>
</div>
<%- include("template/footer") %>

<script>
  const formEditar = document.querySelector('#editar');
    formEditar.addEventListener('submit', async (e) => {
      e.preventDefault()
      const id = formEditar.elements['id'].value
      const nombre = formEditar.elements['nombre'].value
      const tipo = formEditar.elements['tipo'].value
      const descripcion = formEditar.elements['descripcion'].value
      const _id = formEditar.dataset.id
      const data = await fetch(`/pokemon/${_id}`, {
        method: 'PUT',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id,nombre,tipo,descripcion})
      })
      const res = await data.json()
      if(res.estado){
        window.location.href = '/pokemon'
      }else{
        console.log(res)
      }
    })
</script>
