<!DOCTYPE html>
<html lang="en">
<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" type="text/css">
    <title>Index</title>
</head>
<body>
    <%- include('./partials/header.ejs') %>
    <% if (!filmes) { %>
        <%- include('./partials/modal.ejs') %>
    <% } %>
    <main>
        <% filmes.forEach(element => { %>
            <a href="detalhes/<%= element.id %> ">
                <div class="card-container"> 
                    <div class="card-image"> 
                        <img src="<%= element.img %> " alt="<%= element.nome %> ">
                    </div>
                    <div card="card-title">
                        <div> <%= element.nome %> </div>
                    </div>
                    <div class="btn-container">
                       <a href="/apagar/<%= element.id %> ">
                            <img class="delete-icon" src="/img/delete.png" alt="delete icon">
                       </a>
                       <a href="/editar/<%= element.id %> ">
                            <img class="edit-icon" src="/img/edit.png" alt="editar">
                       </a>
                    </div>
                </div>
            </a> 
        <% }) %>  
    </main>
</body>
</html>