<!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/styleCadastro.css" />
    <title>Cadastro</title>
  </head>

  <body>
    <nav>
      <ul>
        <li><img src="/img/pokebola.png" alt="Pokebola" /></li>
        <li>
          <a href="/">
            <h1>Pokédex</h1>
          </a>
        </li>
      </ul>
    </nav>

    <main>
      <section id="cadastro">
        <% if (pokemon === undefined) { %>

        <h2>Cadastre um novo Pokemon!</h2>

        <form action="/cadastrar" method="POST">
          
          <label for="nome">Nome:</label>
          <input
            type="text"
            id="nome"
            name="nome"
            placeholder="Digite o nome do Pokemon:"
            required
          />
          
          <label for="descricao">Descrição:</label>
          <input
            type="text"
            id="descricao"
            name="descricao"
            placeholder="Digite uma descrição:"
            required
          />
          
          <label for="tipo">Tipo:</label>
          <input
            type="text"
            id="tipo"
            name="tipo"
            placeholder="Digite um tipo do Pokemon:"
            required
          />
          
          <label for="altura">Altura</label>
          <input
            type="text"
            id="altura"
            name="altura"
            placeholder="Digite a altura do Pokemon:"
            required
          />
          
          <label for="peso">Peso:</label>
          <input
            type="text"
            id="peso"
            name="peso"
            placeholder="Digite o peso do Pokemon:"
            required
          />
          
          <label for="categoria">Categoria:</label>
          <input
            type="text"
            id="categoria"
            name="categoria"
            placeholder="Digite a categoria do Pokemon:"
            required
          />

          <label for="habilidade">Habilidade:</label>
          <input
            type="text"
            id="habilidade"
            name="habilidade"
            placeholder="Digite a habilidade do Pokemon:"
            required
          />
          
          <label for="imagem">Link da Imagem</label>
          <input
            type="text"
            id="imagem"
            name="imagem"
            placeholder="Cole aqui o link da imagem"
            required
          />
          
          <button id="btnCadastrar" type="submit">Cadastrar</button>
        
        </form>
        <% } else { %>
        
        <h2>Atualização do Pokemon</h2>
        
        <article>
        
          <img src="<%= pokemon.imagem %>" alt="" />
          <h3><%= pokemon.nome %></h3>
        
        </article>
        
        <form action="/upDate/<%= pokemon.id %>" method="POST">
          
          <label for="nome">Nome:</label>
          <input
            type="text"
            id="nome"
            name="nome"
            value="<%= pokemon.nome %>"
          />
          
          <label for="descricao">Descrição:</label>
          <input
            type="text"
            id="descricao"
            name="descricao"
            value="<%= pokemon.descricao %>"
          />
          
          <label for="tipo">Tipo:</label>
          <input
            type="text"
            id="tipo"
            name="tipo"
            value="<%= pokemon.tipo %>"
          />

          <label for="altura">Altura</label>
          <input
            type="text"
            id="altura"
            name="altura"
            value="<%= pokemon.altura %>"
          />
          
          <label for="peso">Peso:</label>
          <input
            type="text"
            id="peso"
            name="peso"
            value="<%= pokemon.peso %>"
          />
          
          <label for="categoria">Categoria:</label>
          <input
            type="text"
            id="categoria"
            name="categoria"
            value="<%= pokemon.categoria %>"
          />

          <label for="habilidade">Habilidade:</label>
          <input
            type="text"
            id="habilidade"
            name="habilidade"
            value="<%= pokemon.habilidade %>"
          />
          
          <label for="imagem">Link da Imagem</label>
          <input
            type="text"
            id="imagem"
            name="imagem"
            value="<%= pokemon.imagem %>"
          />
          
          <button id="btnAtualizar" type="submit">Atualizar</button>
        
        </form>
        <% } %>
      
      </section>
    
    </main>
    
    <footer>
      <p>Ednilson Fragoso</p>
      <p><a href="https://github.com/">GitHub</a></p>
    </footer>
    
    <script src="../public/js/script.js"></script>
  
  </body>

</html>
