<!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>

    <nav>
        <ul>
            <li><img src="/img/pokebola.jpg" alt="pokebola"></li>
            <li>
                <a href="/"><h1>Pokedex</h1></a>
            </li>
            <li><a href="/signup">Submit</a></li>
            <li><a href="#cards">Pokemons</a></li>
        </ul>
    </nav>

    <header>
        <img src="/img/pokemonBanner.jpg" alt="Banner">
    </header>

    
<main> 


    <section id="cards">

        <h2>Pokemon List</h2>

        <% pokedex.forEach((pokemon) => { %>
            
    <div class="card">
        
        <img src="<%= pokemon.imagem %>" alt="">
        <h3 class="name"><%= pokemon.name %></h3>
        <p class="description"><%= pokemon.description %></p>
        <p class="type" >Type: <%= pokemon.type %></p>
        <p class="type" >Height: <%= pokemon.height%></p>
        <p class="type" >Weight: <%= pokemon.weight %></p>
        <p class="type" >Category: <%= pokemon.category %></p>
        <p class="type" >Skill: <%= pokemon.skill %></p>
        <a id="edit" href="/getById/<%= pokemon.id %>/put">Edit</a>
        <a id="delete" href="/getById/<%= pokemon.id %>/delete">Delete</a>
        
    </div>
        <% }) %>
     
    </section>


</main>

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

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

<footer>
    <p>
        Information taken from<a href="https://www.pokemon.com/br/pokedex/"> Pokedex</a>
    </p>
</footer>

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