<!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="home-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>
    <% if(message != "") {  %>
      <section id="message">
          <p><%= message %></p> <span id="close">&times;</span>
      </section>
    <% }  %>
    <main>
      <section class="carousel-container">
        <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
        <% pokedex.forEach((pokemon)=> { %>
        <a href="/detalhes/<%= pokemon.id %>">
          <div class="pokemon-card" id="<%= pokemon.id %>">
            <div class="card-front">
              <img src="./img/front-bg.png" id="front-bg" alt="" />
              <div class="inner">
                <div id="numero">
                  <h3><%= pokemon.numero %></h3>
                  <img src="./img/card-logo.png" class="icon" alt="card-logo" />
                </div>
              </div>
            </div>
            <div class="card-back">
              <div id="tipo">
                <h3><%= pokemon.tipo%></h3>
              </div>
              <img
                src="<%= pokemon.imagem %>"
                id="pokeImg"
                alt="pokemon-imagem"
              />
              <h3><%= pokemon.nome %></h3>
            </div>
          </div>
        </a>
        <% }) %>
        <a class="next" onclick="plusSlides(1)">&#10095;</a>
      </section>
    </main>
    <script src="./js/script.js"></script>
  </body>
</html>