<!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="style.css" />
    <title>Pokedex</title>
  </head>

  <body>
    <header class="header">
      <img src="img/logo.png" alt="logo" draggable="false" />
      <button id="home" type="submit">HOME</button>
      <button id="criar" type="submit">CRIAR</button>
      <button id="editar" type="submit">EDITAR</button>
      <button id="deletar" type="submit">DELETAR</button>
    </header>
    <main class="main">
      <div class="container">
        <% pokedex.forEach((pokemon)=>{%>
        <div class="card">
          <div class="img">
            <img src="<%=pokemon.imagem %>" alt="pokemon" />
          </div>
          <h2><%=pokemon.nome%></h2>
          <div class="content">
            <p>Descrição: <%=pokemon.descricao %></p>
            <p>Tipo: <%=pokemon.tipo %></p>
            <p>Altura: <%=pokemon.altura %>m</p>
            <p>Peso: <%=pokemon.peso %>kg</p>
            <p>Habilidade: <%=pokemon.habilidade %></p>
            <p><%=pokemon.id %></p>
            <a href="/detalhes/<%=pokemon.id %>">EDITAR</a>
          </div>
        </div>
        <%})%>
      </div>

      <div class="gradient"></div>

      <section class="box">
        <% if (pokemon == undefined){%>
        <form action="/add" method="POST">
          <fieldset>
            <legend><b>CADASTRAR POKÉMON</b></legend>
            <br /><br />
            <div class="inputBox">
              <label for="nome">Nome: </label>
              <input type="text" id="nome" name="nome" />
              <br /><br />
              <label for="descricao">Descrição: </label>
              <input type="text" id="descricao" name="descricao" />
              <br /><br />
              <label for="tipo">Tipo: </label>
              <input type="text" id="tipo" />
              <br /><br />
              <label for="altura">Altura(m): </label>
              <input type="text" id="altura" name="altura" />
              <br /><br />
              <label for="peso">Peso(kg): </label>
              <input type="text" id="peso" name="peso" />
              <br /><br />
              <label for="habilidade">Habilidade: </label>
              <input type="text" id="habilidade" name="habilidade" />
              <br /><br />
              <label for="imagem">Link da Imagem: </label>
              <input type="text" id="imagem" name="imagem" />
              <br /><br />
              <button id="btnCadastrar" type="submit">CADASTRAR</button>
            </div>
          </fieldset>
        </form>
        <%}else{%>

        <form action="/update/<%=pokemon.id%>" method="POST">
          <fieldset>
            <legend><b>EDITAR POKÉMON</b></legend>
            <br /><br />
            <div class="inputBox">
              <label for="nome">Nome: </label>
              <input
                type="text"
                id="nome"
                name="nome"
                value="<%=pokemon.nome%>"
              />
              <br /><br />
              <label for="descricao">Descrição: </label>
              <input
                type="text"
                id="descricao"
                name="descricao"
                value="<%=pokemon.descricao%>"
              />
              <br /><br />
              <label for="tipo">Tipo: </label>
              <input
                type="text"
                id="tipo"
                name="tipo"
                value="<%=pokemon.tipo%>"
              />
              <br /><br />
              <label for="altura">Altura(m): </label>
              <input
                type="text"
                id="altura"
                name="altura"
                value="<%=pokemon.altura%>"
              />
              <br /><br />
              <label for="peso">Peso(kg): </label>
              <input
                type="text"
                id="peso"
                name="peso"
                value="<%=pokemon.peso%>"
              />
              <br /><br />
              <label for="habilidade">Habilidade: </label>
              <input
                type="text"
                id="habilidade"
                name="habilidade"
                value="<%=pokemon.habilidade%>"
              />
              <br /><br />
              <label for="imagem">Link da Imagem: </label>
              <input
                type="text"
                id="imagem"
                name="imagem"
                value="<%=pokemon.imagem%>"
              />
              <br /><br />
              <button id="btnCadastrar" type="submit">ATUALIZAR</button>
            </div>
          </fieldset>
        </form>
        <%}%>
      </section>
    </main>
  </body>
</html>
