{% extends "base.html" %}

{% block nav %}
    <nav class="navbar navbar-expand">
        <ul class="navbar-nav mr-auto"></ul>
    <form class="form-inline" method="get" action="/tv_movies/search">
        <div class="form-group mx-2">
        <input type="text" class="form-control" minlength="3" name="q">
        </div>
        <button type="submit" class="btn btn-primary">Search</button>
    </form>
    </nav>
{% endblock %}

{% block content %}
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>
    <div class="w3-container">
        <div id="page-container" style="display: flow-root; text-align: center"></div>
    </div>
    <div style="text-align: center">
    {% include "pagination.html" %}
    </div>
{% endblock %}

{% block footer_content %}
    <div class="container">
        <img src="/static/svg/tmdb.svg" alt="" style="height: 40px;">
        <p>This product uses the TMDb API but is not endorsed or certified by TMDb.</p>
    </div>
    <script>
    var tv_shows = {{ tv_shows|tojson }};
    function populate_page() {
        page_container.innerHTML = "";
        for (i = start;i < end; i++) {
            let badge = ""
            var anchor = `<a href="/tv_movies/${tv_shows[i][0].tmdb_id}">`;
            if (tv_shows[i][0].extended && tv_shows[i][0].directors_cut) {
                anchor = `<a href="/tv_movies/${tv_shows[i][0].tmdb_id}?extended=True&directors_cut=True">`;
            } else if (tv_shows[i][0].extended) {
                badge = `<div class="w3-display-topleft w3-container" style="color: white; background: rgba(105,105,105,0.61); border-radius: 0 5px 5px 0">
            extended
        </div>`
                anchor = `<a href="/tv_movies/${tv_shows[i][0].tmdb_id}?extended=True">`;
            } else if (tv_shows[i][0].directors_cut) {
                badge = `<div class="w3-display-topleft w3-container" style="color: white; background: rgba(105,105,105,0.61); border-radius: 0 5px 5px 0">
            director's cut
        </div>`
                anchor = `<a href="/tv_movies/${tv_shows[i][0].tmdb_id}?directors_cut=True">`;
            }

            var finished = ``;
            if (tv_shows[i][1]) {
                finished = `<div class="w3-display-topright w3-container" style="background: rgba(105,105,105,0.61); border-radius: 5px 0 0 5px">
            <img src="/static/svg/verified.svg" >
        </div>`
            }

            var text = ""
            if (!tv_shows[i][0].poster_path) {
                text = `<div class='w3-display-middle w3-container' style="color: white; text-align: center;font-size: 20px; width: 100%">
${tv_shows[i][0].title} (${tv_shows[i][0].year})</div>`
            }

            var list_element = `<div class="w3-display-container w3-round" style="width: 350px; display: inline-block; padding: 10px">
    ${anchor}
    <div class="card w3-display-container">
        <img class="card-img" src="https://image.tmdb.org/t/p/original${tv_shows[i][0].poster_path}" alt="${tv_shows[i][0].title} (${tv_shows[i][0].year})" title="${tv_shows[i][0].title} (${tv_shows[i][0].year})" onerror="this.src='/static/images/default.png'">
        ${text}
        ${finished}
        ${badge}
    </div>
    </a>
    </div>`;
            page_container.innerHTML += list_element;
        }
    }
    go_to_page(page_num);
    </script>
{% endblock %}
