<!DOCTYPE html>
<html lang="en">

  <head>
    <%- include('./components/head') %> 
  </head>

  <body>

    <%- include('./components/nav') %> 

    <header>
      <img src="/img/banner.jpg" alt="banner">
      <% if(message != "") {%>
      <%- include('./components/alerts') %>
      <% } %>
    </header>

    <main>

      <section id="cards">

        <!-- <h2>Lista de Pokemons</h2> -->

        <% pokedex.forEach((pokemon)=> { %>
        <div class="card">
          <a class="redirect"<%= pokemon.id %>"><img src="<%= pokemon.imagem %>" alt="" />
          <h3><%= pokemon.nome %></h3></a>
          <p class="descricao"><%= pokemon.descricao %></p>
          <p class="tipo">Tipo: <%= pokemon.tipo %></p>
          <a id="editar" href="/getById/<%= pokemon.id %>/put">Editar</a>
          <a id="apagar" href="/getById/<%= pokemon.id %>/delete">Apagar</a>
          
        </div>
        <% }) %>

      </section>

    </main>

    <% if (pokemonPut != null) {%>
      <%- include('./components/modalPut') %>
    <% } %> 

    <% if (pokemonDel != null) {%>
      <%- include('./components/modalDel') %>
    <% } %> 
    
    
    <%- include('./components/footer') %> 

    <script src="/js/script.js"></script>

  </body>
</html>

