{% macro dirlisting(dir, path='') -%}
<ul class="list-group">
    {% if dir and dir.get_subdirs().items() %}
    {% for subdirname, subdirobj in dir.get_subdirs().items() %}
    {% set subdirpath = os.path.relpath(subdirobj.fullpath, music_library.fullpath) %}
    {% set subdirid = subdirpath.replace("/","-") %}
    <li class="directory list-group-item list-group-item-primary">
        <div class="btn-group" role="group">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-success btn-sm"
                        onclick="request('/post', {add_folder : '{{ subdirpath }}'})">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop2" type="button" class="btn btn-success btn-sm dropdown-toggle btn-space" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
                        <a class="dropdown-item"
                           onclick="request('/post', {add_folder : '{{ subdirpath }}'})">
                            <i class="fa fa-folder" aria-hidden="true"></i> Entire folder
                        </a>
                        <a class="dropdown-item"
                           onclick="request('/post', {add_folder_recursively : '{{ subdirpath }}'})">
                            <i class="fa fa-folder" aria-hidden="true"></i> Entire folder and sub-folders
                        </a>
                    </div>
                </div>
            </div>

        </div>

        <div class="btn-group lead"><div class="btn-space"><i class="fa fa-folder" aria-hidden="true"></i></div><a class="lead" data-toggle="collapse"
                    data-target="#multiCollapse-{{ subdirid }}" aria-expanded="true"
                    aria-controls="multiCollapse-{{ subdirid }}" href="#"> {{ subdirpath }}/</a>
        </div>

        <div class="btn-group" style="float: right;">
            <form action="./download" method="get" class="directory">
                <input type="text" value="{{ subdirpath }}" name="directory" hidden>
                <button type="submit" class="btn btn-primary btn-sm btn-space"><i class="fa fa-download" aria-hidden="true"></i></button>
            </form>
            <button type="submit" class="btn btn-danger btn-sm btn-space"
                    onclick="request('/post', {delete_folder : '{{ subdirpath }}'}, true)">
                <i class="fas fa-trash-alt"></i>
            </button>
        </div>
    </li>
    <div class="collapse multi-collapse" id="multiCollapse-{{ subdirid }}">
        {{ dirlisting(subdirobj, subdirpath) -}}
    </div>
    {% endfor %}
    {% endif %}
    {% set files = dir.get_files() %}
    {% if files %}
    {% for file in files %}
    {% set filepath = os.path.relpath(os.path.join(dir.fullpath, file), music_library.fullpath) %}
    <li class="file list-group-item">
        <div class="btn-group" role="group">
            <div class="btn-group" role="group">
                <button type="button" class="btn btn-success btn-sm"
                        onclick="request('/post', {add_file_bottom : '{{ filepath }}'})">
                    <i class="fa fa-plus" aria-hidden="true"></i>
                </button>
                <div class="btn-group" role="group">
                    <button id="btnGroupDrop2" type="button" class="btn btn-success btn-sm dropdown-toggle btn-space" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop2" style="">
                        <a class="dropdown-item"
                           onclick="request('/post', {add_file_bottom : '{{ filepath }}'})">
                            <i class="fa fa-angle-down" aria-hidden="true"></i> To bottom of play list
                        </a>
                        <a class="dropdown-item"
                           onclick="request('/post', {add_file_next : '{{ filepath }}'})">
                            <i class="fa fa-angle-right" aria-hidden="true"></i> After current song
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <div class="btn-group lead">
            <div class="btn-space"><i class="fa fa-music" aria-hidden="true"></i></div>
            {{ filepath }}
        </div>
            {% if tags_lookup[filepath] %}
            {% for tag in tags_lookup[filepath] %}
                <span class="badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
            {% endfor %}
            {% endif %}

        <div class="btn-group" style="float: right;">
            <form action="./download" method="get" class="file file_download">
                <input type="text" value="{{ filepath }}" name="file" hidden>
                <button type="submit" class="btn btn-primary btn-sm btn-space"><i class="fa fa-download" aria-hidden="true"></i></button>
            </form>
            <button type="submit" class="btn btn-danger btn-sm btn-space"
                    onclick="request('/post', {delete_music_file : '{{ filepath }}'}, true)">
                <i class="fas fa-trash-alt"></i>
            </button>
        </div>
    </li>
    {% endfor %}
    {% endif %}
</ul>
{%- endmacro %}

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>botamusique web interface</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/custom.css">
    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="-1">
</head>

<body>
    <div class="container">
        <div class="bs-docs-section">
            <div class="page-header" id="banner">
                <h1><i class="fa fa-music" aria-hidden="true"></i> botamusique Web Interface</h1>
            </div>
        </div>
        <div class="bs-docs-section">
            <div class="row">
            <div class="col">
                <div id="playlist" class="col-lg-12">
                    <div>
                        <div class="btn-group" style="margin-bottom: 10px;">
                            <button type="button" id="play-btn" class="btn btn-info btn-space"
                                    onclick="request('post', {action : 'resume'})" disabled>
                                <i class="fas fa-play" aria-hidden="true"></i>
                            </button>

                            <button type="button" id="pause-btn" class="btn btn-warning btn-space"
                                    onclick="request('post', {action : 'pause'})" disabled>
                                <i class="fas fa-pause" aria-hidden="true"></i>
                            </button>

                            <button type="button" id="stop-btn" class="btn btn-danger btn-space"
                                    onclick="request('post', {action : 'stop'})" disabled>
                                <i class="fas fa-stop" aria-hidden="true"></i>
                            </button>
                        </div>

                        <div class="btn-group" style="float: right;">
                            <button type="button" id="oneshot-btn" class="btn btn-primary btn-space"
                                    title="One-shot Mode"
                                    onclick="request('post', {action : 'one-shot'})" disabled>
                                <i class="fas fa-tasks" aria-hidden="true"></i>
                            </button>

                            <button type="button" id="random-btn" class="btn btn-primary btn-space"
                                    title="Random Mode"
                                    onclick="request('post', {action : 'randomize'})" disabled>
                                <i class="fas fa-random" aria-hidden="true"></i>
                            </button>

                            <button type="button" id="repeat-btn" class="btn btn-primary btn-space"
                                    title="Repeat Mode"
                                    onclick="request('post', {action : 'repeat'})" disabled>
                                <i class="fas fa-redo" aria-hidden="true"></i>
                            </button>

                            <button type="button" id="autoplay-btn" class="btn btn-primary btn-space"
                                    title="Autoplay Mode"
                                    onclick="request('post', {action : 'autoplay'})" disabled>
                                <i class="fas fa-robot" aria-hidden="true"></i>
                            </button>

                            <button type="button" class="btn btn-warning btn-space"
                                    onclick="request('post', {action : 'volume_down'})">
                                <i class="fa fa-volume-down" aria-hidden="true"></i>
                            </button>
                            <button type="button" class="btn btn-warning btn-space"
                                    onclick="request('post', {action : 'volume_up'})">
                                <i class="fa fa-volume-up" aria-hidden="true"></i>
                            </button>
                        </div>

                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">#</th>
                                    <th scope="col" class="playlist-title-td">Title</th>
                                    <th scope="col">Url/Path</th>
                                    <th scope="col">Action</th>
                                </tr>
                            </thead>
                            <tbody id="playlist-table">
                                <tr class="table-dark">
                                <td colspan="4" class="text-muted" style="text-align:center;"> Fetching playlist .... </td>
                                </tr>
                            </tbody>
                        </table>

                        <div class="btn-group">
                            <button type="button" class="btn btn-danger btn-space"
                                    onclick="request('post', {action : 'clear'})">
                                <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div class="bs-docs-section">
            <div class="row">
            <div class="col">
                <div class="page-header">
                    <h1 id="forms">Music Library</h1>
                </div>
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Tags</h4>
                    </div>
                    <div class="card-body">
                        {% for tag in tags_color_lookup.keys() %}
                            <span class="tag-click badge badge-{{ tags_color_lookup[tag] }}"
                                  onclick="request('post', {add_tag : '{{ tag }}'})">
                                {{ tag }}</span>
                        {% endfor %}
                    </div>
                </div>
            </div>
            </div>
        </div>
        <div class="bs-docs-section">
            <div class="row">
                <div class="col">
                <div id="browser" class="card">
                    <div class="card-header">
                        <h4 class="card-title">Files</h4>
                    </div>

                    <div class="card-body">
                        <div class="btn-group" style="margin-bottom: 5px;" role="group">
                            <button type="submit" class="btn btn-secondary btn-space"
                            onclick="request('/post', {action : 'rescan'}); location.reload()">
                                <i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
                            </button>
                            <form action="./download" method="get" class="directory form1">
                                <input type="text" value="./" name="directory" hidden>
                                <button type="submit" class="btn btn-secondary btn-space"><i class="fa fa-download" aria-hidden="true"></i> Download All</button>
                            </form>
                            <form method="post" class="directory form3">
                                <input type="text" value="./" name="add_folder_recursively" hidden>
                                <button type="submit" class="btn btn-secondary btn-space"><i class="fa fa-plus" aria-hidden="true"></i> Add All</button>
                            </form>
                        </div>
                        <br />
                        {{ dirlisting(music_library) }}
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <div id="upload" class="container">
        <div class="bs-docs-section">
            <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Upload File</h5>
                    </div>
                    <div class="card-body">
                        <form action="./upload" method="post" enctype="multipart/form-data">
                            <div class="row" style="margin-bottom: 5px;">
                                <div id="uploadBox" class="col-lg-7 input-group">
                                    <div id="uploadField" style="display: flex; width: 100%">
                                        <div class="custom-file btn-space">
                                            <input type="file" name="file[]" class="custom-file-input" id="uploadSelectFile"
                                                   aria-describedby="uploadSubmit" value="Browse Music file" multiple/>
                                            <label class="custom-file-label" for="uploadSelectFile">Choose file</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-4 input-group-append">
                                    <span class="input-group-text">Upload To</span>
                                    <input class="form-control btn-space" list="targetdirs" id="targetdir" name="targetdir"
                                           placeholder="uploads" />
                                    <datalist id="targetdirs">
                                        <option value="uploads">
                                            {% for dir in music_library.get_subdirs_recursively() %}
                                                <option value="{{ dir }}">
                                            {% endfor %}
                                    </datalist>
                                </div>
                                <button class="btn btn-primary btn-space" type="submit"
                                        id="uploadSubmit" style="margin-left: -5px;">Upload!</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <div class="bs-docs-section" style="margin-bottom: 150px;">
            <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Add URL</h5>
                    </div>
                    <div class="card-body">
                        <label>Add Youtube/Soundcloud URL</label>
                        <div class="input-group">
                            <input class="form-control btn-space" type="text" id="add_url_input" placeholder="URL...">
                            <button type="submit" class="btn btn-primary"
                            onclick="request('/post', {add_url :  $('#add_url_input')[0].value })">Add URL</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Add Radio</h5>
                    </div>
                    <div class="card-body">
                        <label>Add Radio URL</label>
                        <div class="input-group">
                            <input class="form-control btn-space" type="text" id="add_radio_input" placeholder="Radio Address...">
                            <button type="submit" class="btn btn-primary"
                            onclick="request('/post', {add_radio : $('#add_radio_input')[0].value })">Add Radio</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <script src="static/js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
    <script src="static/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="static/js/fontawesome.all.js" crossorigin="anonymous"></script>

    <script>
        $('#uploadSelectFile').on('change', function () {
            //get the file name
            var fileName = $(this).val().replace('C:\\fakepath\\', " ");
            //replace the "Choose a file" label
            $(this).next('.custom-file-label').html(fileName);
        });
        $('a.a-submit, button.btn-submit').on('click', function (event) {
            $(event.target).closest('form').submit();
        });

        var playlist_ver = 0;

        function request(url, _data, refresh=false){
            $.ajax({
                type: 'POST',
                url: 'post',
                data : _data,
                statusCode : {
                    200 : function(data) {
                        if (data.ver !== playlist_ver) {
                            updatePlaylist();
                            playlist_ver = data.ver;
                        }
                        updateControls(data.empty, data.play, data.mode);
                    }
                }
            });
            if(refresh){
                location.reload()
            }
        }

        function displayPlaylist(data){
            // console.info(data);
            $("#playlist-table tr").remove();

            var items = data.items;
            $.each(items, function(index, item){
                $("#playlist-table").append(item);
            });

        }

        function updatePlaylist(){
            $.ajax({
                type: 'GET',
                url: 'playlist',
                statusCode : {
                    200 : displayPlaylist
                }
            });
        }

        function updateControls(empty, play, mode){
            if(empty){
                $("#play-btn").prop("disabled", true);
                $("#pause-btn").prop("disabled", true);
                $("#stop-btn").prop("disabled", true);
            }else{
                if(play){
                    $("#play-btn").prop("disabled", true);
                    $("#pause-btn").prop("disabled", false);
                    $("#stop-btn").prop("disabled", false);
                }else{
                    $("#play-btn").prop("disabled", false);
                    $("#pause-btn").prop("disabled", true);
                    $("#stop-btn").prop("disabled", true);
                }
            }
            if(mode === "one-shot"){
                $("#oneshot-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
                $("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
            }else if(mode === "repeat"){
                $("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#repeat-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
                $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
            }else if(mode === "random"){
                $("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#random-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", false); // This is a feature.
                $("#autoplay-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
            }else if(mode === "autoplay"){
                $("#oneshot-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#repeat-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#random-btn").removeClass("btn-primary").addClass("btn-secondary").prop("disabled", false);
                $("#autoplay-btn").removeClass("btn-secondary").addClass("btn-primary").prop("disabled", true);
            }

        }

        // Check the version of playlist to see if update is needed.
        setInterval(function(){
            $.ajax({
                type: 'POST',
                url : 'post',
                statusCode : {
                    200 : function(data){
                        if(data.ver !== playlist_ver){
                            updatePlaylist();
                            playlist_ver = data.ver;
                        }
                        updateControls(data.empty, data.play, data.mode);
                    }
                }
            });
        } , 3000);

        $(document).ready(updatePlaylist);

    </script>
</body>

</html>