<!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="shortcut icon" type="imagex/png" href="./img/icons/netflix__icon.png">
    <link rel="stylesheet" href="/style/main.css">
    <link rel="stylesheet" href="/style/responsive.css">    
    <link rel="stylesheet" href="/style/style__message.css">
    <link rel="stylesheet" href="/style/owl/carousel.min.css">
    <link rel="stylesheet" href="/style/owl/theme.default.min.css">
    
    <title>NETFLIX CLONE</title>
</head>
<body>
    <nav>
        <header>
            <img class="logo" src="./img/icons/logo.png" alt="logo__netflix">

            <div class="lista">
                <a class="lista__corrent" href="/">Inicio</a>
                <a class="lista__navegacao" href="/filmes">Filmes</a>
                <a class="lista__navegacao" href="/series">Series</a>
                <a class="lista__navegacao" href="/cadastro">Cadastrar</a>
            </div>
        </header>
        
        <!-- <div class="videobg">
            <iframe id="vid" src="https://www.youtube.com/embed/x4_EAlRLY_E?autoplay=1&loop=1&controls=0&cc_load_policy=0&end=164&iv_load_policy=3&rel=0&showinfo=0" title="YouTube video player" frameborder="0" allow="autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen ></iframe>
            <video class="video" id="vid" src=".img/video/The Old Guard _ Trailer oficial _ Netflix.mp4" type="video/mp4"></video>
          </div> -->
    
        <div class="filme-principal">
            <div class="container">
                <h3 class="titulo">The Old Guard</h3>
                <p class="descricao">O filme conta a história de um grupo de mercenários que, por um motivo desconhecido, se tornaram imortais. Eles são liderados por Andy (Charlize Theron), e há séculos participam de batalhas em prol da humanidade, sempre mantendo sigilo para não serem descobertos.</p>
                <div class="botoes">
                    <button role="button" class="botao">
                        <i class="fas fa-play"></i>
                        ASSISTIR AGORA
                    </button>
                    <button role="button" class="botao">
                        <i class="fas fa-info-circle"></i>
                        MAIS INFORMAÇÕES
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <main>

        <% let _display = ( message ? "display:flex;" : "display:none;" ); %>
        <section id="message" style=<%= _display %> >
            <p><%= message %></p> <span id="close">&times;</span>
        </section>

        <div class="carrosel-filmes">
            <h2>
                Títulos
            </h2>
            
            <div id="filmes" class="owl-carousel owl-theme">
                <% filmes.forEach(item => { %>                
                    <% if (item.tipo == 1) { %>
                        <div class="item">
                            <a href="/detalhes/<%= item.id %>"><img class="box-filme" src="<%= `/img/capas/${item.imagem}` %>" ></a>
                            
                        </div>
                    <% } %>

                <% }) %>
        
            </div>
        
        </div>

    <!--
        <div class="carrosel-filmes">
            <h2>
                Séries
            </h2>
            
            <div id="series" class="owl-carousel owl-theme">
                <% filmes.forEach(item => { %>                
                    <% if (item.tipo == 2) { %>
                        <div class="item">
                            <a href="/detalhes/<%= item.id %>"><img class="box-filme" src= <%= item.imagem %> ></a>
                            
                        </div>
                    <% } %>

                <% }) %>
        
            </div>
        
        </div>
    -->

    </main>
    <footer>

        <div class="grupo__persona" id="footer__quem">
            <h4>
                Quem somos:
            </h4>
        </div>

        <div class="grupo">
            <div class="grupo__persona">
                <h4>Alexandre Meirelles</h4>

                <h6>Coordenador de Marketing</h6>
                <h6>Dev. FullStack</h6>

                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                    <li>NodeJS</li>
                    <li>Express</li>
                    <li>React</li>
                    <li>Linux</li>
                </ul>

                <div class="grupo__logo">
                    <a href="https://www.linkedin.com/in/alemeirelles/" target="_blank"><img src= "./img/icons/linkedin.png" alt="logo__linkedin"></a>
                    <a href="https://github.com/alexmeirelles" target="_blank"><img src= "./img/icons/github.png" alt="logo__GitHub"></a>
                    <a href="https://wa.link/dgii67" target="_blank"><img src= "./img/icons/whatsapp--v1.png" alt="logo__Whats"></a>
                </div>                    

            </div>


            <div class="grupo__persona">
                <h4>Elieldo Martins</h4>

                <h6>Dev. Soft.</h6>
                <h6>Dev. FullStack</h6>

                <ul>
                    <li>Java</li>
                    <li>JavaScript</li>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>MVC</li>
                    <li>Nodejs</li>
                    <li>Express</li>
                </ul>

                <div class="grupo__logo">
                    <a href=" https://www.linkedin.com/in/elieldo-martins-05839673/" target="_blank"><img src= "./img/icons/linkedin.png" alt="logo__linkedin"></a>
                    <a href="https://github.com/hefi1413" target="_blank"><img src= "./img/icons/github.png" alt="logo__GitHub"></a>
                    <a href="https://wa.link/672b1b" target="_blank"><img src= "./img/icons/whatsapp--v1.png" alt="logo__GitHub"></a>
                </div>                

            </div>

            <div class="grupo__persona">
                <h4>Victor Paim</h4>

                <h6>Auxiliar Financeiro</h6>
                <h6>Dev. FullStack</h6>

                <ul>
                    <li>HTML</li>
                    <li>CSS</li>
                    <li>JavaScript</li>
                    <li>NodeJS</li>
                    <li>Express</li>
                    <li>Python</li>
                    <li>MVC e BEM</li>
                </ul>

                <div class="grupo__logo">
                    <a href="https://www.linkedin.com/in/labupaim/" target="_blank"><img src= "/img/icons/linkedin.png" alt="logo__linkedin"></a>
                    <a href="https://github.com/LabuPaim" target="_blank"><img src= "/img/icons/github.png" alt="logo__GitHub"></a>
                    <a href="https://wa.me/qr/FREXR7E4HNB7N1" target="_blank"><img src= "/img/icons/whatsapp--v1.png" alt="logo__GitHub"></a>
                </div>                    

            </div>

            

        </div>
        <div class="grupo__persona">
            <h4>
                Projeto
            </h4>
            <h6>
                Netflix Clone
            </h6>
            <h6>
                Projeto do curso FullStack da Blue EdTech.
                Esse é o projeto final do módulo, esse projeto consiste na criação de um catálogo (com tema livre), onde é possível no futuro realizar as 4 operações do CRUD.
            </h6>            
        </div>

        

    </footer>
    <center>
        <small>
         ©2022 Netflix Clone, Inc. Alunos da Blue EdTech - todos os direitos reservados.
         </small> 
     </center>

    <script src="https://kit.fontawesome.com/e52baa07be.js" crossorigin="anonymous"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="/js/setup.js"></script>
    <script type="text/javascript" src="/js/script.js"></script>

</body>
</html>