<!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 href="../css/style.css" rel="stylesheet">
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <title>Index</title>
</head>
<body>
    <%- include('./partials/header.ejs') %>
    <main>
        <div id="sub__header">SÃ©timaArte, aqui encontram-se apenas as melhores obras do cinema!</div>
        <section id="card__container">
            <% listArtes.forEach(element => { %>
                <a href="/detalhes/<%= element.id %>">
                <article class="cards">
                    <div class="card__img">
                        <img src="<%= element.img %> " alt="<%= element.nome %>">
                    </div>
                    <div class="card__nome">
                        <%= element.nome %>
                    </div>
                </article>
                </a>
                    <div class="btn__container">
                        <a href="/deletar/<%= element.id %> "><i class="fa-solid fa-trash"></i></a>
                        <a href="/editar/<%= element.id %> "><i class="fa-solid fa-pencil"></i></a>
                    </div>
            <% }) %>
        </section>
    </main>
    <%- include('./partials/footer.ejs') %>
</body>
</html>