<!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">
    <title>Menu</title>
    <link rel="stylesheet" href="/../css/style.css">
    <link rel="icon" href="/IMG/iconn.png">
</head>
<body id = "fundo">
<% if(mensagem !="" ) { %>
    <section id="message">
        <p class="blackk">
            <%= mensagem %>
        </p> <span id="close">&times;</span>
    </section>
    <% } %>
        <header class="header">
            <a href="/"> <img src="/../IMG/edita.gif" width="50" height="45"></a>
            <nav>
                <ul class="menu">
                    <li><a href=/cadastro>Criar </a></li>
                    <li><a href="/">Menu</a></li>
                </ul>
            </nav>
        </header>
    <h1>
        Catalago De filmes
    </h1>
<section class="flex">
        <% filme.forEach(item=> { %>
            <div>
           <h2 class = "fontZ">
                <%= item.nome %>
           </h2>

            <a href="https://projeto-catalago.herokuapp.com/detalhes/<%= item.id%>">
                <img src=" <%= item.imagem%>" alt ="<%= filme.nome%>" class="imag">
            </a>
            </div>
        <% }) %>
</section>
<script>
    const closeMessage = document.querySelector("#close")
        const message = document.querySelector("#message")

        closeMessage.addEventListener("click", function () {
            message.style.display = "none"
        })

        setTimeout(() => {
            message.style.display = "none"
        }, 5000)
</script>
</body>
</html>