<!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/style.css">
    <title>Cat√°logo de Filmes</title>
</head>
<body>
    <%- include('./partials/header.ejs') %>
    <main>
        <section id="container">
            <% listaFilmes.forEach(element => { %>
            <a href="/detalhes/<%= element.id %>">
                <article class="card">
                    <div class="cardImagem"> 
                        <img src=" <%= element.imagem %> " alt="">
                    </div>
                    <div class="cardNome">
                        <%= element.nome %>
                    </div>
                </article>
            </a>
            <div class="btn_container">
                <a href="/delete/<%=element.id%>"><i class="fa-solid fa-trash-can"></i></a>
                <a href="/editar/<%=element.id%>"> <i class="fa-solid fa-pencil"></i></a>
            </div>
            <% }) %>
        </section>
    </main>
    <%- include('./partials/footer.ejs') %>
<script src="https://kit.fontawesome.com/d09c2b3b91.js" crossorigin="anonymous"></script>
</body>
</html>