{% set page_title = 'Subscription Manager' %}
{% extends "base.html" %}
{% block style %}
    .import-export{
        display: flex;
        flex-direction: row;
        padding-left: 10px;
        padding-top: 10px;
    }
        .subscriptions-import-form{
            background-color: var(--interface-color);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            max-width: 300px;
            padding:10px;
        }
            .subscriptions-import-form h2{
                font-size: 1.25rem;
                margin-bottom: 10px;
            }

            .import-submit-button{
                margin-top:15px;
                align-self: flex-end;
            }


        .subscriptions-export-links{
            margin: 0px 0px 0px 20px;
            background-color: var(--interface-color);
            list-style: none;
            max-width: 300px;
            padding:10px;
        }

    .sub-list-controls{
        background-color: var(--interface-color);
        padding:10px;
    }


    .tag-group-list{
        list-style: none;
        margin-left: 10px;
        margin-right: 10px;
        padding: 0px;
    }
        .tag-group{
            border-style: solid;
            margin-bottom: 10px;
        }

    .sub-list{
        list-style: none;
        padding:10px;
        column-width: 300px;
        column-gap: 40px;
    }
        .sub-list-item{
            display:flex;
            margin-bottom: 10px;
            break-inside:avoid;
        }
        .sub-list-item:not(.muted){
            background-color: var(--interface-color);
        }
            .tag-list{
                margin-left:15px;
                font-weight:bold;
            }
            .sub-list-item-name{
                margin-left:15px;
            }
            .sub-list-checkbox{
                height: 1.5em;
                min-width: 1.5em;   // need min-width otherwise browser doesn't respect the width and squishes the checkbox down when there's too many tags
            }
{% endblock style %}


{% macro subscription_list(sub_list) %}
    {% for subscription in sub_list %}
        <li class="sub-list-item {{ 'muted' if subscription['muted'] else '' }}">
            <input class="sub-list-checkbox" name="channel_ids" value="{{ subscription['channel_id'] }}" form="subscription-manager-form" type="checkbox">
            <a href="{{ subscription['channel_url'] }}" class="sub-list-item-name" title="{{ subscription['channel_name'] }}">{{ subscription['channel_name'] }}</a>
            <span class="tag-list">{{ ', '.join(subscription['tags']) }}</span>
        </li>
    {% endfor %}
{% endmacro %}



{% block main %}
    <div class="import-export">
        <form class="subscriptions-import-form" enctype="multipart/form-data" action="/youtube.com/import_subscriptions" method="POST">
            <h2>Import subscriptions</h2>
            <input type="file" id="subscriptions-import" accept="application/json, application/xml, text/x-opml" name="subscriptions_file">
            <input type="submit" value="Import" class="import-submit-button">
        </form>

        <!--<ul class="subscriptions-export-links">
            <li><a href="/youtube.com/subscriptions.opml">Export subscriptions (OPML)</a></li>
            <li><a href="/youtube.com/subscriptions.xml">Export subscriptions (RSS)</a></li>
        </ul>-->
    </div>

    <hr>

    <form id="subscription-manager-form" class="sub-list-controls" method="POST">
        {% if group_by_tags %}
            <a class="sort-button" href="/https://www.youtube.com/subscription_manager?group_by_tags=0">Don't group</a>
        {% else %}
            <a class="sort-button" href="/https://www.youtube.com/subscription_manager?group_by_tags=1">Group by tags</a>
        {% endif %}
        <input type="text" name="tags">
        <button type="submit" name="action" value="add_tags">Add tags</button>
        <button type="submit" name="action" value="remove_tags">Remove tags</button>
        <button type="submit" name="action" value="unsubscribe_verify">Unsubscribe</button>
        <button type="submit" name="action" value="mute">Mute</button>
        <button type="submit" name="action" value="unmute">Unmute</button>
        <input type="reset" value="Clear Selection">
    </form>


    {% if group_by_tags %}
        <ul class="tag-group-list">
            {% for tag_name, sub_list in tag_groups %}
                <li class="tag-group">
                    <h2 class="tag-group-name">{{ tag_name }}</h2>
                    <ol class="sub-list">
                        {{ subscription_list(sub_list) }}
                    </ol>
                </li>
            {% endfor %}
        </ul>
    {% else %}
        <ol class="sub-list">
            {{ subscription_list(sub_list) }}
        </ol>
    {% endif %}

{% endblock main %}