<!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"/>
    <!-- CSS only -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.2/font/bootstrap-icons.css" rel="stylesheet"/>
    <link href="/css/style.css" rel="stylesheet"/>
    <title>Inicio</title>
</head>
<body>
    <%- include('./partials/header.ejs') %>
    <main>
        <section id="banner_home">
            <div>
                <img src="/img/pokedex.png" />
                <button><a href="/#card_poke">Ir para Pokedex</a></button>
            </div>
        </section>
        <section id="banner_Cad">
            <article class="banner_Img">
                <p><img src="/img/pokeball.gif"/></p>
            </article>

            <article class="banner_Cadform">
                <%- include('./partials/cadastroPartial.ejs')%> 
            </article>
        </section>
        
        <section id="card_poke">
            <% infoPokemons.forEach(element => { %>
                <article id="card">
                    <div class="card_title">
                        <h2><%=element.name%></h2>
                        <img src="<%=element.image%>" alt="foto do <%=element.name%>"/>
                    </div>
                    <div class="info" >
                        <p>
                            <%=element.type%>
                        </p>
                        <p>
                            nÂº <%=element.number%>
                        </p>
                    </div>
                    <div class="card_data">
                        <div>
                            <h5>Peso</h5>
                            <p><%=element.weight%></p>
                        </div>
                        <div>
                            <h5>Altura</h5>
                            <p>
                                <%=element.height%>
                            </p>
                        </div>
                        <div>
                            <h5>Categoria</h5>
                            <p>
                                <%=element.category%>
                            </p>
                        </div>
                        <div>
                            <h5>Habilidade</h5>
                            <p>
                                <%=element.ability%>
                            </p>
                        </div>
                    </div>
                    <div class="card_description">
                        <p>
                            <%=element.description%>
                        </p>
                    </div>
                    <div class="card_actions">
                        <ul>
                            <li><a href="/delete/<%=element.id%>">Apagar</a></li>
                        </ul>
                    </div>
                </article>
            <% }) %>
        </section>
    </main>
    <%- include('./partials/footer.ejs') %>
    <script src="/js/script.js"></script>
</body>
</html>