<!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" type="text/css" />
        <link
            rel="icon"
            type="imagem/png"
            href="https://cdn-icons-png.flaticon.com/512/528/528098.png"
        />
        <title>Pokedex Project - by Lucas Ponciano</title>
    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <img src="/img/logo-pokebola.png" alt="" class="src" />
                </li>
                <li>
                    <h1><a href="/">Pokedex</a></h1>
                </li>
                <li><a href="/register">Register</a></li>
                <li><a href="/#cards">Details</a></li>
            </ul>
        </nav>

        <main>
            <section id="cards">
                <h2>Pokemon List</h2>

                <% pokedex.forEach((pokemon) => { %>
                <div class="card">
                    <img src="<%= pokemon.image %>" alt="" class="src" />
                    <h3><%= pokemon.name %></h3>
                    <p class="description"><%= pokemon.description %></p>
                    <p>Type: <%= pokemon.type %></p>
                    <p>Height: <%= pokemon.height %></p>
                    <p>Weight: <%= pokemon.weight %></p>
                    <p>Category: <%= pokemon.category %></p>
                    <p>Abilities: <%= pokemon.abilities %></p>
                </div>
                <%})%>
            </section>
        </main>

        <footer>
            <p>
                &copy; Created by
                <a href="https://github.com/poncianodev" target="_blank"
                    >Lucas Ponciano</a
                >
            </p>
            <p>
                Project presented in Module 2 of the
                <a href="https://blueedtech.com.br/" target="_blank"
                    >Blue EdTech</a
                >
            </p>
        </footer>
    </body>

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