<!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/estilo.css">
    <link rel="stylesheet" href="./css/estiloIndex.css">    
    <link rel="stylesheet" href="./css/estiloMensagem.css">
    <title>BlueFlix</title>
</head>

<body>
    <header>
        <%- include('nav') %>
    </header>

    <main>           
        <div class="imagembg">
            <input type="hidden" id="imagemAtual" value="./img/Blueflix.png">                    
        </div>          
        <section class="catalogo">            
            <% trailer.forEach((elemento) =>{ %>
                <div class="miniatura">
                    <a href="/detalhes/<%= elemento.id %>">
                    <img id="imgIndex" src="<%= elemento.thumb %>" alt="">
                    <div class="titulo">
                        <img src="./img/<%= elemento.classificacao %>.png">
                        <h1><%= elemento.titulo %></h1>
                    </div>
                    </a>
                </div>
            <% }) %>
        </section>
    </main>
    
    <% if (message != "") {  %>
        <section id="message">
            <p><%= message %></p> <span id="close">&times;</span>
        </section>
    <% }  %>

    <footer>
        <%- include('footer') %>
    </footer>    
    <script src="/js/scriptImagem.js"></script>
    <script src="/js/scriptMensagem.js"></script>
    <script src="/js/scriptNav.js"></script>    
</body>
</html>