<!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 href="/css/style.css" rel="stylesheet">   
  <title>Home</title>
</head>

<body>

        <%- include('./partials/header.ejs') %>

        <% if(message != "") { %>

            <section id="message" class="message message-<%= message.type %>">

                <p> <%= message %></p>
             
                     <i id="close-message" class="fa-solid fa-times"></i>
             
             </section>
        <% } %>
   

  
  <main>
      <div id="sub__header"> </div>
      <section id="card__container">

          <% listaFilmes.forEach(element => { %>
          
            <a href="/detalhes/<%= element.id %> ">
              <article class="cards">
                  <div class="card_img">
                      <img src="<%= element.imagem %> " alt="<%= element.nome %> ">
                  </div>
                  <div class="card_name">
                      <%= element.titulo %>
                  </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') %>

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