<%- include("template/cabecera", {tituloWeb: 'Index'}) %>
<div class="container">
  <h1>Detalles del Pok√©mon</h1>
</div>

<% if (error) { %> <%= mensaje %>
<a href="/pokemon" class="btn btn-dark btn-block my-2">Volver</a>
<% } else { %>
<div class="container">
  <form id="editar" data-id="<%= pokemon._id %>">
    <input
      type="number"
      name="id"
      id="idInput"
      class="form-control my-2"
      value="<%= pokemon.id %>"
    />
    <input
      type="text"
      name="nombre"
      id="nombreInput"
      class="form-control my-2"
      value="<%= pokemon.nombre %>"
    />
    <input
      type="text"
      name="tipo"
      id="tipoInput"
      class="form-control my-2"
      value="<%= pokemon.tipo %>"
    />
    <input
      type="text"
      name="descripcion"
      id="descripcionInput"
      class="form-control my-2"
      value="<%= pokemon.descripcion %>"
    />
    <button type="submit" class="btn btn-primary btn-sm">Actualizar</button>
  </form>
  <hr />
  <% } %>
</div>
<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>
<%- include("template/footer")%>
