{% extends "YtManagerApp/master_default.html" %}
{% load static %}
{% load crispy_forms_tags %}

{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
{% endblock %}

{% block scripts %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
    <script>
        {% include 'YtManagerApp/js/index.js' %}
    </script>
{% endblock %}

{% block body %}

    <div id="modal-wrapper">
        <div id="modal-loading" class="black-overlay">
            <div class="loading-dual-ring loading-dual-ring-center-screen"></div>
        </div>

        <div id="modal-wrapper">
        </div>
    </div>

    <div class="row">

        <div class="col-3">
            {# Tree toolbar #}
            <div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
                <div class="btn-group mr-2" role="group">
                    <button id="btn_create_sub" type="button" class="btn btn-light"
                            data-toggle="tooltip" title="Add subscription...">
                        <span class="typcn typcn-plus" aria-hidden="true"></span>
                    </button>
                    <button id="btn_create_folder" type="button" class="btn btn-light"
                            data-toggle="tooltip" title="Add folder...">
                        <span class="typcn typcn-folder-add" aria-hidden="true"></span>
                    </button>
                    <button id="btn_import" type="button" class="btn btn-light"
                            data-toggle="tooltip" title="Import from file...">
                        <span class="typcn typcn-document-add" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="btn-group mr-2" role="group">
                    <button id="btn_edit_node" type="button" class="btn btn-light"
                            data-toggle="tooltip" title="Edit selection">
                        <span class="typcn typcn-edit" aria-hidden="true"></span>
                    </button>
                    <button id="btn_delete_node" type="button" class="btn btn-light"
                            data-toggle="tooltip" title="Delete selection">
                        <span class="typcn typcn-trash" aria-hidden="true"></span>
                    </button>
                </div>
            </div>

            <div id="tree-wrapper">
                <div class="d-flex">
                    <div class="loading-dual-ring mx-auto my-5"></div>
                </div>
            </div>
        </div>

        <div class="col-9">
            {# Video toolbar #}
            <div class="btn-toolbar" role="toolbar" aria-label="Subscriptions toolbar">
                {% crispy filter_form %}
            </div>

            <div id="videos-wrapper">
            </div>

            <div id="videos-loading" style="display: none">
                <div class="d-flex">
                    <div class="loading-dual-ring mx-auto my-5"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}