<%- include ('partials/header') -%>
<main class="formContainer">
  <h2>Register a new Pokemon</h2>
  <form action="/" method="post">
    <div class="inputStats">
      <label for="number">Number</label>
      <input
        type="number"
        name="number"
        required="required"
        title="Number of the pokemon in the pokedex"
        max="999"
        min="0"
      />
    </div>
    <div class="inputStats">
      <label for="name">Name</label>
      <input
        type="text"
        name="name"
        required="required"
        title="Name of the pokemon"
        autocapitalize="none"
      />
    </div>
    <div class="inputStats">
      <label for="type">Type</label>
      <select name="type" required>
        <Optgroup label="Types">
          <%allTypes.forEach(type=>{ %>
          <option><%=type%></option>
          <% })%>
        </Optgroup>
      </select>
      <label for="secondType">Second Type</label>
      <select name="secondType" required>
        <Optgroup label="Types">
          <option selected="selected">None</option>
          <%allTypes.forEach(type=>{ %>
          <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"
      />
    </div>
    <label for="description">Description</label>
    <textarea
      name="description"
      cols="15"
      rows="5"
      placeholder="What is the history of this pokemon..."
    ></textarea>
    <div class="inputStats">
      <label for="height">Height</label>
      <input type="number" step="0.1" name="height" min="0.1" max="21" />
      <label for="weight">Weight</label>
      <input type="number" step="0.1" name="weight" min="0.1" max="999" />
    </div>
    <div class="inputStats">
      <label for="category">Category</label>
      <input type="text" name="category" />
    </div>
    <div class="inputStats">
      <label for="ability">Ability</label>
      <input type="text" name="ability" />
    </div>
    <button type="submit">Send</button>
  </form>
</main>
<%- include ('partials/footer') -%>
