<!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/estilo.css">
        <title>Pokedéx</title>
    </head>
    <body>
        <article id="tudoo">
            <section class="container">
                <h1> 
                    <a id="titulo" href="/"></a>Pokedéx</a>
                </h1>
            
            </section>
            <section class="botao">
                <a id="detail" href="/new">Cadastro</a>
                <a id="home" href="/">Home</a>
            </section>
        

            <% if(message != ""){ %>
            <section id="message">
                <p class="sucesso">Pokemon cadastrado com sucesso!</p>      <span id="close">&times;</span>
            </section>
            <% } %>
        
            <section id="poke">
                <% listaprincipal.forEach((item, id) => { %>
                <ul> 
                    <div><img class="imagee" src="<%= item.imagem %>" width="250" height="250" alt="imagem1"></div>
                    <div><p class="numeroo"><strong>Número: </strong> <%= item.numero %></p></div> 
                    <div><p class="nomee"><strong>Nome: </strong> <%= item.nome %> <br> </p></div> 
                    <div><p class="tipoo"><strong>Tipo: </strong> <%= item.tipo %> <br> </p></div>
                    <div><a class="tipooo" href="/detalhes/<%=id%>">Ver Detalhes</a></div>
                </ul>
                <% }) %> 
            </section>
        </article>
        

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