<!DOCTYPE html>
<html lang="pt-BR">

    <head>
        <%- include('./components/head') %><!--assim que chamamos o head em componentes pra ca-->
    </head>

<body>
    <%- include('./components/nav') %> <!--chamando a nav dos componentes pra ca-->
    
    <!-- o code de baixo é pra message não aparecer toda hora e sem mensagem-->
    <% if(message != "") {  %>
<section id="message"> <!--CODE de confirmação de cadastro-->
    <p><%= message %></p> <span id="close">&times;</span>
</section>
<% }  %>

<%- include('./components/header') %>
    

    <main>
        <!--esse maon é pla facilitar na stylização-->
        <section id="cards">
            <!--section card  possível stylirizar-->
            <% pokedex.forEach((pokemon)=> { %>
                <!--essa estrutura precisa ser fechada na emsma linha   <%  %>-->

                <div class="card">
                    <!--possível stylirizar card por card-->
                    <!--o foreach vai criar várias div para separar em vários cardizinhos-->
                    <div class="dropdown">
                        <div class="dropdown-button">
                            <i class="bi bi-three-dots-vertical"></i>
                        </div>
                        <div class="dropdown-content">
                            <a id="editar" href="/getById/<%= pokemon.id %>/put">Editar</a>
                            <a id="apagar" href="/getById/<%= pokemon.id %>/delete">Apagar</a>
                        </div>
                    </div>


                    <img src=" <%= pokemon.imagem %>" alt="">
                    <!-- essa sintex que pegamos links do JS esse sinal de = é porque é apresentado uma variável para acessar os itens de um OBJETO colocamos o PONTO-->
                    <h2>
                        <%= pokemon.nome %>
                    </h2>
                    <p class="descricao">
                        <%= pokemon.descricao %>
                    </p>
                    <p>Tipo: <%= pokemon.tipo %>
                    </p>
                    <p id="doId"> Id <%= pokemon.id %></p><!-- o sinal de igual foi essencial para funcionar-->
                    <a id="infoo" href="/info/<%=pokemon.id%>">info</a>
                    <a id="editar" href="/getById/<%=pokemon.id%>/put/">Editar</a>
                    <a id="apagar" href="/getById/<%=pokemon.id%>/delete/">Apagar</a>

                </div>
                <% }) %>
                    <!--precisamos dessa sintex para escrever em javaScript no thml-->
        </section>
        <!--FORMULÁRIO-->
        

    </main>

    <section id="info">    </section>




    <% if(pokemonPut != null)  { %>
    <%- include('./components/modalPut') %>
    <% } %>

    <% if (pokemonDel !=null) {%>
        <%- include('./components/modalDel') %>
            <% } %>
            
        <%- include('./components/footer') %>



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


</html>