<!DOCTYPE html5>
<html>
<head>
    {% import "header.html" as header %}
    <title>{{channel['name']}}</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/common.css">
    <script src="/static/common.js"></script>

<style>
#content_body
{
    display: flex;
    flex-direction: column;
    width: 1440px;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}
.video_card
{
    position: relative;
    margin: 8px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #000;
}
.video_card:hover
{
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}
.video_card_pending
{
    background-color: #ffffaa;
}
.video_card_ignored
{
    background-color: #ffc886;
}
.video_card_selected
{
    background-color: #13f4ff !important;
}
.video_card_downloaded
{
    background-color: #aaffaa;
}

.action_toolbox
{
    float: right;
    display: inline-flex;
    flex-direction: row;
    position: relative;
}
.video_action_dropdown
{
    z-index: 1;
    background-color: #fff;
    padding: 4px;
    border: 1px solid #000;
    position: absolute;
    top: 100%;
    right: 0;
    display: none;
    flex-direction: column;
}
</style>
</head>


<body>
{{header.make_header()}}
<div id="content_body">
    {% if channel is not none %}
    <span><button class="refresh_button"
    onclick="refresh_channel('{{channel['id']}}', false, function(){location.reload()})">Refresh new videos</button></span>
    <span><button class="refresh_button"
    onclick="refresh_channel('{{channel['id']}}', true, function(){location.reload()})">Refresh everything</button></span>
    <span><a href="/channel/{{channel['id']}}">All</a></span>
    <span><a href="/channel/{{channel['id']}}/pending">Pending</a></span>
    <span><a href="/channel/{{channel['id']}}/ignored">Ignored</a></span>
    <span><a href="/channel/{{channel['id']}}/downloaded">Downloaded</a></span>
    {% else %}
    <span><a href="/videos">All</a></span>
    <span><a href="/videos/pending">Pending</a></span>
    <span><a href="/videos/ignored">Ignored</a></span>
    <span><a href="/videos/downloaded">Downloaded</a></span>
    {% endif %}
    <span>{{videos|length}} items</span>
    
    <div id="video_cards">
        {% for video in videos %}
        <div id="video_card_{{video['id']}}"
        data-ytid="{{video['id']}}"
        onclick="onclick_select(event)"
        {% if video['download'] == "downloaded" %}
        class="video_card video_card_downloaded"
        {% elif video['download'] == "ignored" %}
        class="video_card video_card_ignored"
        {% else %}
        class="video_card video_card_pending"
        {% endif %}
        >
            <a href="https://www.youtube.com/watch?v={{video['id']}}">{{video['_published_str']}} - {{video['title']}}</a>
            {% if channel is none %}
            <a href="/channel/{{video['author_id']}}">(Chan)</a>
            {% endif %}
            <div class="action_toolbox">
                <button
                {% if video['download'] == "pending" %}
                class="video_action_pending hidden"
                {% else %}
                class="video_action_pending"
                {% endif %}
                onclick="action_button_passthrough(event, mark_video_state, 'pending')"
                >Revert to Pending</button>

                <button
                {% if video['download'] == "pending" %}
                class="video_action_download"
                {% else %}
                class="video_action_download hidden"
                {% endif %}
                onclick="action_button_passthrough(event, start_download)"
                >Download</button>

                <button
                {% if video['download'] == "pending" %}
                class="video_action_ignore"
                {% else %}
                class="video_action_ignore hidden"
                {% endif %}
                onclick="action_button_passthrough(event, mark_video_state, 'ignored')"
                >Ignore</button>
            </div>
        </div>
        {% endfor %}
    </div>

</div>
</body>


<script type="text/javascript">
var video_card_first_selected = null;
var video_card_selections = [];
var video_cards = Array.from(document.getElementById("video_cards").children);

function deselect_all()
{
    var video_card_first_selected = null;
    for (var index = 0; index < video_card_selections.length; index +=1)
    {
        video_card_selections[index].classList.remove("video_card_selected");
    }
    video_card_selections = [];
}

function onclick_select(event)
{
    if (!event.target.classList.contains("video_card"))
    {
        return;
    }
    if (video_card_first_selected === null)
    {
        video_card_first_selected = event.target;
    }

    if (event.shiftKey === false && event.ctrlKey === false)
    {
        video_card_selections = [];
        video_card_selections.push(event.target);
        video_card_first_selected = event.target;
    }
    else if (event.shiftKey === true)
    {
        video_card_selections = [];
        var start_index = video_cards.indexOf(video_card_first_selected);
        var end_index = video_cards.indexOf(event.target);
        if (end_index < start_index)
        {
            var temp = start_index;
            start_index = end_index;
            end_index = temp;
        }

        for (var index = start_index; index <= end_index; index += 1)
        {
            video_card_selections.push(video_cards[index]);
        }
    }
    else if (event.ctrlKey === true)
    {
        var existing_index = video_card_selections.indexOf(event.target)
        if (existing_index == -1)
        {
            video_card_first_selected = event.target;
            video_card_selections.push(event.target);
        }
        else
        {
            video_card_selections.splice(existing_index, 1);
        }
    }


    for (var index = 0; index < video_cards.length; index += 1)
    {
        card = video_cards[index];
        if (video_card_selections.indexOf(card) > -1)
        {
            card.classList.add("video_card_selected");
        }
        else
        {
            card.classList.remove("video_card_selected");
        }
    }
    return false;
}

function action_button_passthrough(event, action_function, action_argument)
{
    var elements;
    var this_card = event.target.parentElement.parentElement;
    if (video_card_selections.length > 0 && video_card_selections.indexOf(this_card) > -1)
    {
        elements = video_card_selections;
    }
    else
    {
        // Button -> button toolbox -> video card
        elements = [this_card];
    }
    for (var index = 0; index < elements.length; index += 1)
    {
        card = elements[index];
        if (action_argument === undefined)
        {
            action_function(card.dataset['ytid'], receive_action_response);
        }
        else
        {
            action_function(card.dataset['ytid'], action_argument, receive_action_response);
        }
    }
    deselect_all();
}

function give_action_buttons(video_card_div)
{
    var button_pending = video_card_div.getElementsByClassName("video_action_pending")[0];
    var button_download = video_card_div.getElementsByClassName("video_action_download")[0];
    var button_ignore = video_card_div.getElementsByClassName("video_action_ignore")[0];
    if (video_card_div.classList.contains("video_card_pending"))
    {
        button_download.classList.remove("hidden");
        button_ignore.classList.remove("hidden");
        button_pending.classList.add("hidden");
    }
    else
    {
        button_download.classList.add("hidden");
        button_ignore.classList.add("hidden");
        button_pending.classList.remove("hidden");
    }
}

function receive_action_response(response)
{
    var video_id = response['video_id'];
    var state = response['state'];
    var card = document.getElementById("video_card_" + video_id);
    if (state == 'pending')
    {
        card.classList = ["video_card", "video_card_pending"].join(" ");
        card.style.backgroundColor = "#ffffaa";
    }
    else if (state == 'ignored')
    {
        card.classList = ["video_card", "video_card_ignored"].join(" ");
        card.style.backgroundColor = "#ffc886";
    }
    else if (state == 'downloaded')
    {
        card.classList = ["video_card", "video_card_downloaded"].join(" ");
        card.style.backgroundColor = "#aaffaa";
    }
    give_action_buttons(card);
}

function refresh_channel(channel_id, force, callback)
{
    var url = "/refresh_channel";
    data = new FormData();
    data.append("channel_id", channel_id);
    data.append("force", force)
    return post(url, data, callback);    
}

function mark_video_state(video_id, state, callback)
{
    var url = "/mark_video_state";
    data = new FormData();
    data.append("video_id", video_id);
    data.append("state", state);
    return post(url, data, callback);
}

function start_download(video_id, callback)
{
    var url = "/start_download";
    data = new FormData();
    data.append("video_id", video_id);
    return post(url, data, callback);    
}
</script>
</html>