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

<style>
#content_body
{
    display: flex;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
    flex-direction: column;
    width: 1440px;
    margin: auto;
    max-width: 100%;
}
#new_channel_textbox,
#new_channel_button
{
    width: 200px;
}
.channel_card_downloaded,
.channel_card_pending
{
    margin: 8px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #000;
}
.channel_card_pending
{
    background-color: #ffffaa;
}
.channel_card_downloaded
{
    background-color: #aaffaa;
}
.refresh_button
{
    width: 10%;
}
</style>
</head>


<body>
{{header.make_header()}}
<div id="content_body">
    <button class="refresh_button" onclick="refresh_all_channels(false, function(){location.reload()})">Refresh new videos</button>
    <button class="refresh_button" onclick="refresh_all_channels(true, function(){location.reload()})">Refresh everything</button>
    <div>
        <input type="text" id="new_channel_textbox">
        <button id="new_channel_button" onclick="_new_channel_submit()">Add new channel</button>
    </div>
    {% for channel in channels %}
    {% if channel['has_pending'] %}
    <div class="channel_card_pending">
    {% else %}
    <div class="channel_card_downloaded">
    {% endif %}
        <a href="/channel/{{channel['id']}}">{{channel['name']}}</a>
    </div>
    {% endfor %}
</div>
</body>


<script type="text/javascript">
var box = document.getElementById('new_channel_textbox');
var button = document.getElementById('new_channel_button');
bind_box_to_button(box, button);

function _new_channel_submit()
{
    if (box.value !== "")
    {
        refresh_channel(box.value, false, function(){location.reload()});
    }
}

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 refresh_all_channels(force, callback)
{
    var url = "/refresh_all_channels";
    data = new FormData();
    data.append("force", force)
    return post(url, data, callback);
}
</script>
</html>