<!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">
    <title>Tv Series Search</title>
    <style>
        body {
            background-color: rgb(44, 45, 65);
        }

        .card {
            background-color: rgb(81, 84, 121);
            border-color: rgb(81, 84, 121);
            color: white;
            width: 12rem;
            margin: 0 auto;
            margin-bottom: 20px;
            margin-top: 20px;
        }

        @media only screen and (max-width: 400px) {
            .card {
                width: 90%;
            }
        }

        .card-text,
        .card-title {
            text-align: center;
        }

        .card-text {
            position: absolute;
            top: 0;
            left: 5px;
            top: 5px;
            background-color: rgb(44, 45, 65);
            padding: 3px 6px 3px 6px;
            font-size: 13px;
            border-radius: 10px;
            color: rgb(235, 220, 11);
        }

        .category--title {
            text-align: center;
            color: white;
            margin: 30px;
            margin-bottom: 10px;
        }

        .category--hr {
            background-color: white;
            margin: 0 auto;
        }

        .pagination {
            justify-content: center;
            outline: none;
        }

        .page-item a {
            color: white;
            background-color: rgb(81, 84, 121);
            border: 0px;
            outline: none;
        }

        .page-item a:hover {
            color: white;
            background-color: rgb(110, 113, 158);
        }

        .homeButton {
            color: white;
            position: absolute;
            top: 15px;
            left: 15px;
        }

        .homeButton:hover {
            color: rgb(110, 113, 158);
        }

        .fa-chevron-left {
            font-size: 20px;
        }

        .fa-chevron-left:hover {
            color: rgb(110, 113, 158);
        }

        .navbar {
            background-color: rgb(81, 84, 121);
        }

        input,
        button {
            display: inline;
        }

        .searchInput {
            outline: none;
            border: none;
            padding: 5px;
            border-radius: 5px;
        }

        .btn {
            border-color: rgb(44, 45, 65);
            color: white;
            margin-top: -6px;
        }

        .btn:hover {
            background-color: rgb(44, 45, 65);
            border-color: rgb(44, 45, 65);
            color: white;
        }

        .searchForm {
            position: absolute;
            right: 10px;
            top: 8px;
        }

        .navbar {
            height: 50px;
        }

        .card:hover {
            color: white;
            text-decoration: none;
        }
    </style>
</head>

<body>
    <nav class="navbar">
        <form class="searchForm" action="/tv/search" method="POST">
            <input class="searchInput mr-sm-2" name="search">
            <button class="btn" type="submit">Search</button>
        </form>
    </nav>

    <a class="homeButton" href="/more/popularTvSeries?page=1"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>

    <% if(total_results == 0) { %>
    <h1 class="category--title">No tv series results for <%= search %></h1>
    <% } %>
    <% if(total_results !== 0) { %>
    <h1 class="category--title">Tv series results for <%= search %></h1>
    <% } %>
    <% var resultsNumber=19; %>
    <% if(total_results<=18) { resultsNumber = total_results; } %>
    <div class="container-fluid" style="display: flex;flex-direction: row;flex-wrap:wrap;">
        <% for(var i = 0 ; i <= resultsNumber-1 ; i ++) { %>
        <a href="/details/tvseries?id=<%= searchTv[i].id %>" target="_blank" class="card">
            <% if(searchTv[i].poster_path != null) { %>
            <img src="<%= IMGPATH + searchTv[i].poster_path %>" class="card-img-top">
            <% } %>
            <% if(searchTv[i].poster_path == null) { %>
            <img src="/images/altPoster.jpg" class="card-img-top">
            <% } %>
            <div class=" card-body">
                <div class="card-title"><%= searchTv[i].original_name %></div>
                <div class="card-text"><%= searchTv[i].vote_average %></div>
            </div>
        </a>
        <% } %>
    </div>


</body>

</html>