<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="/img/icone.png" type="image/x-icon" />
    <title>Document</title>
  </head>
  <body>
    <%- include('./partials/header.ejs') %>
    <h2 id="cadastro">Cadastrar novo Pokémon</h2>
    <section id="cadastro">
      <picture>
        <img
          src="https://www.kindpng.com/picc/m/541-5418191_original-pokedex-hd-png-download.png"
          alt=""
        />
      </picture>

      <div>
        <form action="/create" method="post">
          <fieldset>
            <label for="nome">Nome:</label>
            <input
              type="text"
              name="nome"
              id="nome"
              onchange="validarCampos()"
              placeholder="Nome"
              required
            />
          </fieldset>
          <fieldset>
            <label for="tipo">Tipo:</label>
            <input
              type="text"
              name="tipo"
              id="tipo"
              onchange="validarCampos()"
              placeholder="Tipo"
              required
            />
          </fieldset>
          <fieldset>
            <label for="descricao">Descrição:</label>
            <input
              type="text"
              name="descricao"
              id="descricao"
              onchange="validarCampos()"
              placeholder="Descrição"
              required
            />
          </fieldset>
          <fieldset>
            <label for="altura">Altura:</label>
            <input
              type="text"
              name="altura"
              id="altura"
              onchange="validarCampos()"
              placeholder="Altura"
              required
            />
          </fieldset>
          <fieldset>
            <label for="peso">Peso:</label>
            <input
              type="text"
              name="peso"
              id="peso"
              onchange="validarCampos()"
              placeholder="Peso"
              required
            />
          </fieldset>
          <fieldset>
            <label for="categoria">Categoria:</label>
            <input
              type="text"
              name="categoria"
              id="categoria"
              onchange="validarCampos()"
              placeholder="Categoria"
              required
            />
          </fieldset>
          <fieldset>
            <label for="habilidade">Habilidade:</label>
            <input
              type="text"
              name="habilidade"
              id="habilidade"
              onchange="validarCampos()"
              placeholder="Habilidade"
              required
            />
          </fieldset>
          <fieldset>
            <label for="imagem">Link da Imagem:</label>
            <input
              type="text"
              name="imagem"
              id="imagem"
              onchange="validarCampos()"
              placeholder="Link da Imagem"
              required
            />
          </fieldset>
          <button id="btnCadastrar" type="submit" disabled="true">
            Cadastrar
          </button>
        </form>
      </div>
    </section>
    <div class="modal">
      <header>
        <h2>Cabeçalho</h2>
        <span class="fechar-modal">×</span>
      </header>
      <div class="corpo-modal">
        <p>Pokémon cadastrado</p>
      </div>
      <footer>
        <button class="fechar-modal">OK</button>
      </footer>
    </div>
    <script src="script.js"></script>
  </body>
  <%- include('./partials/footer.ejs') %>
</html>
