<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Top Stream</title>
</head>

<body>



    <h1 class="category--title"><a href="/more/popularMovies?page=1">Popular Movies</a></h1>
    <div class="container-fluid" style="display: flex;flex-direction: row;flex-wrap:wrap;">
        <% for(var i = 0 ; i <= 13 ; i ++) { %>
        <a href="/details/movie?id=<%= popularMovies[i].id %>" target="_blank" class="card">
            <img src="<%= IMGPATH + popularMovies[i].poster_path %>" class="card-img-top" alt="...">
            <div class=" card-body">
                <div class="card-title"><%= popularMovies[i].title %></div>
                <div class="card-text"><%= popularMovies[i].vote_average %></div>
            </div>
        </a>
        <% } %>
    </div>

    <div class="container-fluid"><a href="/more/popularMovies?page=1" class="more">View more <i
                class="fa fa-chevron-right" aria-hidden="true"></i></a>
    </div>

    <h1 class="category--title"><a href="/more/popularTvSeries?page=1">Popular Tv Series</a></h1>
    <div class="container-fluid" style="display: flex;flex-direction: row;flex-wrap:wrap;">
        <% for(var i = 0 ; i <= 13 ; i ++) { %>
        <a href="/details/tvseries?id=<%= popularTvSeries[i].id %>" target="_blank" class="card">
            <img src="<%= IMGPATH + popularTvSeries[i].poster_path %>" class="card-img-top" alt="...">
            <div class=" card-body">
                <div class="card-title"><%= popularTvSeries[i].name %></div>
                <div class="card-text"><%= popularTvSeries[i].vote_average %></div>
            </div>
        </a>
        <% } %>
    </div>

    <div class="container-fluid" style="margin-bottom: 30px;"><a href="/more/popularTvSeries?page=1" class="more">View
            more <i class="fa fa-chevron-right" aria-hidden="true"></i></a></div>

    <div class="footer">Developed and designed by Dancau Sebastian<br>sebidancau@yahoo.com<br>Api from <a
            href="https://developers.themoviedb.org/3/getting-started/introduction" target="_blank"
            style="color:rgb(179, 179, 179);">The Movie
            Database</a><br>Copyright&#169;2020</div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>
</body>

</html>