<!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" />
    <title>Pokedex</title>
  </head>
  <body>
    <header>
      <h1>Pokedex</h1>
    </header>

    <main>
      <section id="card">
        <% pokedex.forEach((pokemon)=> { %>
        <div class="cads">
          <img src="<%= pokemon.imagem %>" alt="" />
          <h2><%= pokemon.nome %></h2>
          <p><%= pokemon.descricao %></p>
          <button class="tipo"><%= pokemon.tipo %></button>
          <button class="cate"><%= pokemon.categoria %></button>
          <a href="/espec/<%= pokemon.id %>">Editar</a>
        </div>
        <% }) %>
      </section>

      <section id="cadastro">
        <% if (pokemon == undefined) { %>
        <h2>Adicione um novo Pokemon</h2>

        <form action="/add" method="post">
          <label for="nome">Nome:</label>
          <input type="text" id="nome" name="nome" />

          <label for="descricao">Descrição:</label>
          <input type="text" id="descricao" name="descricao" />

          <label for="tipo">Tipo:</label>
          <input type="text" name="tipo" id="tipo" />

          <label for="categoria">Categoria:</label>
          <input type="text" name="categoria" id="categoria" />

          <label for="imagem">Imagem:</label>
          <input type="text" name="imagem" id="imagem" />

          <button id="bntCadastrar" type="submit">Adicionar</button>
        </form>
        <%} else{ %>

        <h2>Atualize o Pokemon</h2>

        <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"
            name="tipo"
            id="tipo"
            value="<%= pokemon.tipo %>"
          />

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

          <label for="imagem">Imagem:</label>
          <input
            type="text"
            name="imagem"
            id="imagem"
            value="<%= pokemon.imagem %>"
          />

          <button id="bntNew" type="submit">Atualizar</button>
        </form>
        <% } %>
      </section>
    </main>
  </body>
</html>
