<%# Canopy - The next generation of stoner streaming software
Copyright (C) 2024-2025 Rainbownapkin and the TTN Community

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
<link rel="stylesheet" type="text/css" href="/css/panel/queue.css">
<div id="queue-panel-layout-controller">
    <div id="queue-controls">
        <div id="queue-control-buttons">
            <button title="Add Media" id="queue-add-media" class="bi-plus-lg"></button>
            <button title="Go Live" id="queue-go-live" class="bi-record2 danger-button"></button>
            <button title="Search Channel Schedule" id="queue-search-media" class="bi-search"></button>
            <button title="Autoscroll"id="queue-scroll-lock" class="positive-button"><i class="bi-clock-fill"></i><i class="bi-arrows-expand"></i></button>
            <button title="Date Picker" id="queue-date" class="bi-calendar-fill"></button>
            <button title="Playlists" id="queue-playlists" class="bi-list"></button>
            <button title="Delete Range" id="queue-clear" class="danger-button bi-trash-fill"></button>
            <button title="Lock Schedule" id="queue-lock" class="positive-button bi-unlock-fill"></button>
        </div>
        <div id="queue-control-date" style="display: none">
            <i class="bi-caret-left" id="queue-control-date-decrement"></i>
            <input id="queue-control-date-prompt" type="date">
            <i class="bi-caret-right" id="queue-control-date-increment"></i>
        </div>
        <div id="queue-media-prompts" style="display: none;">
            <div class="panel-control-prompt control-prompt">
                <input placeholder="Media Link..." id="media-link-input" class="control-prompt">
            </div>
            <div class="panel-control-prompt control-prompt">
                <%# Probably not the cleanest way to do this but fuggit %>
                <input placeholder="Media Name..." id="media-name-input" class="control-prompt">
                <button id="queue-last-button" class="positive-button">Queue Last</button>
                <button id="queue-at-button" class="positive-button">Queue At...</button>
            </div>
        </div>
        <div id="queue-live-prompts" style="display: none;">
            <div class="panel-control-prompt control-prompt">
                <%# Probably not the cleanest way to do this but fuggit %>
                <input placeholder="Livestream Name..." id="queue-live-prompts-name-input" class="control-prompt">
                <button id="queue-live-prompts-overwrite-button" data-mode="overwrite" title="Go Live, over-writing any media scheduled during the live stream." class="danger-button">Go Live (Overwrite)</button>
                <button id="queue-live-prompts-pushback-button" data-mode="pushback" title="Go Live, pushing-back any media scheduled during, or after the live steam." class="danger-button">Go Live (Pushback)</button>
            </div>
        </div>
        <div id="queue-playlist-prompts" style="display: none;">
            <span class="queue-playlist-label-span interactive" id="queue-add-playlist-span">
                <i class="bi-plus" id="queue-add-playlist-icon"></i>
                <p id="queue-add-playlist-label">Create Playlist</p>
            </span>
            <span class="queue-playlist-label-span interactive" id="queue-channel-playlist-span">
                <i class="bi-caret-right-fill" id="queue-channel-playlist-toggle"></i>
                <p id="queue-channel-playlist-label">Channel Playlists</p>
            </span>
            <div style="display: none;" id="queue-channel-playlist-div" class="queue-playlists-div"></div>
            <span class="queue-playlist-label-span interactive" id="queue-user-playlist-span">
                <i class="bi-caret-right-fill" id="queue-user-playlist-toggle"></i>
                <p id="queue-user-playlist-label">User Playlists</p>
            </span>
            <div style="display: none;" id="queue-user-playlist-div" class="queue-playlists-div"></div>
        </div>
    </div>
    <div id="queue-control-offset"></div>
    <div id="queue">
        <div id="queue-marker-container"></div>
        <div id="queue-container"></div>
    </div>
</div>