<!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">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">

    <title>Blue Pokedex</title>
</head>
<body>
    
    <header>
        
        <center>
            <img id="logo" src="https://pokedex.sleduardo.dev/img/logo.svg"> 
        </center>   
        <nav>
            <a href="/" class="button-58" role="button">INICIO</a>
            <a href="/cadastro/" class="button-58" role="button">CADASTRO</a> 
            </nav>
    </header>
    
    <% if(message != "") {  %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% }  %>

    <main>
        <section id="cards">

        <% pokedex.forEach((pokemon, id) => { %>
        <div class="card">
            <a href="/detalhes/<%=pokemon.id%>">
            <img src="<%= pokemon.imagem %>" alt>
            <h2 class="descricao"><%= pokemon.nome %></h2>
            <p class="descricao"><%= pokemon.descricao %></p>
            <p class="descricao"><%= pokemon.tipo %></p>
            </a>
        </div>
        <% }) %>

        </section>

        
    </main>
    
    <footer id='footer'>
        <center>
           <small>
            ©2021 Pokémon. TM, ®Nintendo.
        </small> 
        </center>
    </footer>
    
    <script src="script.js"></script>
</body>
</html>