<!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="stylesheet" href="/css/style.css">
    <title><%= title %></title>
</head>

<body>
    <nav>
        <img src="/img/logo-pokemon.png" class="img-fluid gif" alt="Logo Pokemon">
        <ul>
            <li>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/cadastrar" id="menu-cadastrar">Cadastrar</a>
            </li>
        </ul>
    </nav>
    
    <header>
        <article>
            <h1>POKEDÉX</h1>
            <p>Este site é uma enciclopédia virtual de Pokémons.
               Sua proposta é permitir o registro de todas espécies de diferentes Pokémons existens.</p>
        </article>
    </header>

    <section>
        <% let _display = ( message ? "display:flex;" : "display:none;" ); %>
        <div id="message" style=<%= _display %> >
            <p><%= message %></p> <span id="close">&times;</span>
        </div>
    </section>

    <main>
        <section>
            <article>
                <div id="content" class="main">

                    <% if(pokedex) {  %>
                        <% for(let pokemom of pokedex) { %>

                            <div class="card" title="Clique na imagem" data-id=<%= pokemom.id %>>
                                <div style="width:230px;height:230px;">
                                    <img style="width:100%;" src= <%= pokemom.imagem %>  />
                                </div>
                                <div class="card-text">
                                    <h3 style="color:black "><%= pokemom.nome %> </h3> 
                                    <div style="text-align: center;background-color: cornflowerblue;">
                                        <span style="color: white;"> <%= pokemom.tipo %> </span>
                                    </div>
                                </div>
                            </div>

                        <% } %>
                    <% } %>

                </div>
            </article>
        </section>
    </main>

    <!-- JQUERY -->
    <script src="/js/jquery.min.js"></script>

    <!-- APP scripts -->
    <script type="text/javascript"  src="/js/script.js"> </script> 

    <footer>
        <p>
            The future is blue <a href="https://blueedtech.com.br/" target="_blank"> BlueEdtech</a>
        </p>
    </footer>
</body>

</html>