<!DOCTYPE html5>
<html>
<head>
    {% import "header.html" as header %}
    <title>Channels</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="/static/css/common.css">
    <link rel="stylesheet" href="/static/css/ycdl.css">
    <script src="/static/js/common.js"></script>
    <script src="/static/js/api.js"></script>
    <script src="/static/js/spinner.js"></script>

<style>
#new_channel_textbox,
#new_channel_button
{
    width: 200px;
}
.channel_card_no_pending,
.channel_card_pending
{
    margin: 8px 0;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #000;
}
.channel_card_pending
{
    background-color: #ffffaa;
}
.channel_card_no_pending
{
    background-color: #aaffaa;
}
</style>
</head>


<body>
{{header.make_header()}}
<div id="content_body">
    <div><button class="refresh_button button_with_spinner" onclick="return refresh_all_channels_form(false);">Refresh new videos</button></div>
    <div><button class="refresh_button button_with_spinner" onclick="return refresh_all_channels_form(true);">Refresh everything</button></div>
    <div>
        <input type="text" id="new_channel_textbox" placeholder="Channel id">
        <button id="new_channel_button" class="button_with_spinner" onclick="return add_channel_form();">Add new channel</button>
    </div>

    <div id="channels">
    {% for channel in channels %}
    {% if channel.has_pending() %}
    <div class="channel_card_pending">
    {% else %}
    <div class="channel_card_no_pending">
    {% endif %}
        <a href="/channel/{{channel.id}}">{{channel.name}}</a> <a href="/channel/{{channel.id}}/pending">(p)</a>
        {% if channel.automark not in [none, "pending"] %}
        <span>automark: {{channel.automark}}</span>
        {% endif %}
    </div>
    {% endfor %}
    </div>
</div>
</body>


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

function add_channel_form()
{
    if (box.value === "")
    {
        return spinner.BAIL;
    }
    api.channels.add_channel(box.value, add_channel_callback);
}
function add_channel_callback(response)
{
    if (response.meta.status == 200)
    {
        window.location.href = "/channel/" + response.data.id;
    }
    else
    {
        alert(JSON.stringify(response));
    }
}

function refresh_all_channels_form(force)
{
    console.log(`Refreshing all channels, force=${force}.`);
    api.channels.refresh_all_channels(force, refresh_all_channels_callback)
}
function refresh_all_channels_callback(response)
{
    if (response.meta.status == 200)
    {
        common.refresh();
    }
    else
    {
        alert(JSON.stringify(response));
    }
}
</script>
</html>