<!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/style__detalhes.css">
    <link rel="stylesheet" href="/style/style__message.css">
    <link rel="stylesheet" href="/style/style__detalhes.css">
    <link rel="stylesheet" href="/style/responsive.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" >
    <link rel="preconnect" href="https://fonts.gstatic.com">

    <title>Detalhes</title>
</head>
<body>
    
    <nav>
        <header>
            <img class="logo" src="../img/icons/logo.png" alt="logo__netflix">
            <div class="lista">
                <a class="lista__navegacao" 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>
            
    </nav>

    <main class="main__detalhes">
        <div class="main__principal">
            <h1><%= filme.nome.toUpperCase() %></h1>    
            <img src="<%=`/img/capas/${filme.imagem}`%>" alt="capa do filme <%= filme.nome %>">               
            
        </div>
        
        <div class="main__secundaria">
            <div class="main__secundaria__h2">
                <h2> <% if (filme.tipo == 'filme'){ %>
                    Filme
                <% } %>
                <% if (filme.tipo == 'serie'){ %>
                    Serie
                <% } %>
            </h2>

            </div>
            
            <div class="main__row">
                <h2>Ano:</h2> <p><%= filme.ano %></p>
            </div>
            <div class="main__row">
                <h2>Genero:</h2> <p><%= filme.genero %></p>
            </div>                
            
            <h2>Sinopse:</h2> <p id="main__sinopse"><%= filme.descricao %></p>

            <div class="main__buttons">
                <div></div>
                <a href="/editar/<%= filme.id %>">Editar</a>
                <a href="/deletar/<%= filme.id %>">Excluir</a>
                <div></div>
                <div></div>
                <div></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="/js/script.js"></script>
</body>
</html>