<!DOCTYPE html>
<html lang="pr-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" />
    <link rel="icon" type="imagem/img" href="/img/aba.png" />
    <title>Pokedex</title>
  </head>
  <body id="fundo">
    <header id="icon">
      <a id="pokedexid" href="/"><strong>POKEDEX</strong></a>
      <img src="/img/icone.gif" width="150" alt="pokebola" />
      <img src="/img/pokedex.webp" width="300" alt="pokebola" />
      <img src="/img/icone.gif" width="150" alt="pokebola" />
      <a id="cadastroid" href="/new"><strong>CADASTRAR</strong></a>
    </header>
    <% if(message != ""){ %>
    <section id="message">
      <p class="sucesso">Pokemon cadastrado com sucesso!</p>
      <span id="close">&times;</span>
    </section>
    <% } %>
    <section class="pokemons">
      <% pokedex.forEach((item, id) => { %>
      <ul>
        <li>
          <a href="/detalhes/<%=id%>">
            <img src="<%= item.imagem %>" alt="<%= item.nome %>" />
            <li><strong>Nome: </strong><%= item.nome %></li>
          </a>
        </li>
        <li><strong>Tipo:</strong> <%= item.tipo %></li>
      </ul>
      <% }) %>
    </section>
    <footer>
      <p></p>
    </footer>
    <script src="/js/script.js"></script>
  </body>
</html>
