<%- include("template/cabecera", {tituloWeb: 'Nuevo Pokemon'}) %>
<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 %>">
        <input type="number" class="form-control my-2" name="id" id="idInput" value="<%= pokemon.id %>">
        <input type="text" class="form-control my-2" name="nombre" id="nombreInput" value="<%= pokemon.nombre %>">
        <input type="text" class="form-control my-2" name="tipo" id="tipoInput" value="<%= pokemon.tipo %>">
        <input type="text" class="form-control my-2" name="descripcion" id="descripcionInput" value="<%= pokemon.descripcion %>">
        <button class="btn btn-primary btn-sm" type="submit">Actualizar</button>
    </form>

  <% } %> 
  <%- 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>
  

</div>
