<%- include ('partials/header') -%>
<main>
  <div class="inputStats">
    <h3>NÂº</h3>
    <p><%= String(pokemon.number).padStart(3, '0') %></p>
    <h3>Name</h3>
    <p><%= pokemon.name %></p>
  </div>
  <img src="<%= pokemon.image %> " class="pokeImgSingle" />
  <div class="inputStats">
    <h3>Hg</h3>
    <p><%= pokemon.height %> m</p>
    <h3>Wg</h3>
    <p><%= pokemon.weight %> kg</p>
  </div>
  <div class="inputStats">
    <h3>Type</h3>
    <p><%= pokemon.type %></p>
    <%if(pokemon.secondType){%>
      <h3>SecondType</h3>
      <p><%= pokemon.secondType %></p>
    <%}%>
  </div>
  <div class="inputStats">
    <h3>Category</h3>
    <p><%= pokemon.category %></p>
    <h3>Ability</h3>
    <p><%= pokemon.ability %></p>
  </div>
  <h3>Description</h3>
  <p class="description"><%= pokemon.description %></p>
  <div class="inputStats">
    <p>See something wrong?</p>
    <button class="update">Edit</button>
  </div>
  <dialog>
      <button class="modalClose delete" ><i class="fa-regular fa-rectangle-xmark"></i></button>
    <form method="POST" action="/update<%= pokemon.id %>?_method=PUT" >
      <input type="hidden" name="_method" value="PUT" enctype="application/x-www-form-urlencoded">
      <div class="inputStats">
          <label for="number">Number</label>
          <input
            type="number"
            name="number"
            required="required"
            title="Number of the pokemon in the pokedex"
            value="<%= pokemon.number%>"
            max="999"
          />
        <label for="name">Name</label>
        <input
          type="text"
          name="name"
          required="required"
          title="name is obligatory"
          autocapitalize="none"
          value="<%= pokemon.name.toUpperCase() %>"
        />
      </div>
      <div class="inputStats">
        <label for="type">Type</label>
        <select name="type" required>
          <Optgroup >
            <%allTypes.forEach(type=>{ %>
              <%if(type.toLowerCase()=== pokemon.type){%>
                <option selected><%=type%></option>
              <%}else{%>
                <option><%=type%></option>
              <%}%>
            <% })%>
          </Optgroup>
        </select>
        <label for="secondType">Second Type</label>
        <select name="secondType" required>
          <Optgroup >
              <option>None</option>
            <%allTypes.forEach(type=>{ %>
              <%if(type.toLowerCase()=== pokemon.secondType){%>
                <option selected><%=type%></option>
              <%}else{%>
                <option><%=type%></option>
              <%}%>
            <% })%>
          </Optgroup>
        </select>
      </div>
      <div class="inputStats">
        <label for="image">Image URL</label>
        <input
          type="url"
          name="image"
          required="required"
          title="image URL is obligatory"
          value="<%= pokemon.image %>"
        />
      </div>
      <label for="description">Description</label>
      <textarea
        name="description"
        cols="15"
        rows="5"
        class="updateDesc"
      ></textarea>
      <div class="inputStats">
        <label for="height">Height</label>
        <input type="number" step="0.1" name="height" min="0.1" max="21" value="<%= pokemon.height %>"/>
        <label for="weight">Weight</label>
        <input type="number" step="0.1" name="weight" min="0.1" max="999" value="<%= pokemon.weight %>" />
      </div>
      <div class="inputStats">
        <label for="category">Category</label>
        <input type="text" name="category" value="<%= pokemon.category %>"/>
      </div>
      <div class="inputStats">
        <label for="ability">Ability</label>
        <input type="text" name="ability" value="<%= pokemon.ability %>"/>
      </div>
      <button type="submit">Update</button>
    </form>
    <form method="POST" action="/delete<%=pokemon.id %>?_method=DELETE" style="gap: 0; margin: 5px 0;">
      <input type="hidden" name="_method" value="DELETE" enctype="application/x-www-form-urlencoded">
      <p>Something Terribly wrong?</p>
      <button class="openConfirmation delete" type="button">Delete</button>
      <dialog class="confirmation">
        <p><strong>ALERT</strong></p>
        <p>This action cannot be undone are you sure you want to Delete <%= pokemon.name.toUpperCase() %> Number <%= pokemon.number %> ?</p>
        <button type="submit">Yes</button>
        <button class="closeConfirmation delete" type="button">No</button>
      </dialog>
    </form>
  </dialog>
</main>
<%- include ('partials/footer') -%>
