<!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="icon" type="image/png" href="/img/bola.png">
    <link rel = "stylesheet" href="/CSS/style.css"> 

    <title>Projeto Pokédex</title>
</head>
<body>
    
    <nav>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="cadastro">Cadastrar</a>
            </li>
        </ul>
    </nav>

    <% if(message != ""){ %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% } %>

    <header>
        <article>
            <h1><center><%= titulo%></center></h1>
            <p>É uma enciclopédia virtual portátil de alta tecnologia que os treinadores Pokémon 
                transportam para registrar todas as espécies diferentes de Pokémon.</p>
             
        </article>
    </header>

    <section id="sessao1">
        <section class = "card">
            <article id="content">
                <ul>
                    <% lista.forEach((item, find) => { %>
                    <a href = "/detalhes/<%= find %>">
                    <p><img src ="<%= item.imagem %>" alt="Imagem Pokémon"/></p>
                    <p><%= item.nome %></p>         
                    <p><%= item.tipo %></p>
                    <% }) %> 
                </ul>
            </article>
        </section>
    </section>

    <footer>
        <p>Copyright 2021 - Blue Edtech</p>
    </footer> 

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