<!DOCTYPE html>
<html lang="pt-br">
  <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="./css/style.css" />
    <title>Pokedex</title>
  </head>

  <body class="cadastro-body">
    <header id="top-container">
      <h1 id="header">Pokédex</h1>
      <img id="pokedex-logo" src="./img/Pokédex_logo.png" alt="pokédex logo" />
      <img
        id="pokeball-logo"
        src="./img/pokeball-logo.png"
        alt="pokeball-logo"
      />
    </header>
    <nav class="menu">
      <div>
        <a href="/">Home</a>
      </div>
      <div>
        <a href="/cadastro">Cadastro</a>
      </div>
    </nav>
    <main>
      <section id="container-cadastro">
        <h2>Cadastre um Novo POKEMÓN!</h2>
        <div class="form" >
          <form action="/create" name="myForm" id="createForm"  method="POST">
            <label for="nome" class="lbl">Nome:</label>
            <input type="text" class="field" name="nome" required/>

            <label for="numero" class="lbl">Número:</label>
            <input type="text" class="field" name="numero" required/>

            <label for="tipo" class="lbl">Tipo:</label>
            <input type="text" class="field" name="tipo" required/>

            <label for="imagem" class="lbl" >Link da Imagem:</label>
            <input type="text" class="field" name="imagem" required/>

            <label for="descricao" class="lbl">Descrição:</label>
            <input type="text" class="field" name="descricao" required/>

            <label for="altura" class="lbl">Altura:</label>
            <input type="text" class="field" name="altura" required/>

            <label for="peso" class="lbl">Peso:</label>
            <input type="text" class="field" name="peso" required/>

            <label for="categoria" class="lbl">Categoria:</label>
            <input type="text" class="field" name="categoria" required/>

            <label for="habilidade" class="lbl">Habilidade:</label>
            <input type="text" class="field" name="habilidade" required/>

            <div class="ball">
              <button id="btn-cadastrar" type="submit">Cadastrar</button>
            </div>
          </form>
        </div>
      </section>
    </main>
    <script src="./public/js/script.js"></script>
  </body>
</html>