<%# 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/>. %>

<div class="chat-panel" id="chat-panel-div">
    <div class="drag-handle left-drag-handle" id="chat-panel-drag-handle">
    </div>
    <div class="chat-panel panel-head-div" id="chat-panel-head-div">
        <i class="chat-panel panel-head-element bi-film" id="chat-panel-show-video-icon"></i>
        <i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-div-hide"></i>
        <select class="chat-panel panel-head-element" id="chat-panel-high-level-select">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>
        <p class="chat-panel panel-head-element" id="chat-panel-high-level-paragraph">/10</p>
        <select class="chat-panel panel-head-element" id="chat-panel-flair-select">
            <option>Flair</option>
        </select>
        <span class="chat-panel panel-head-spacer-span" id="chat-panel-head-spacer-span"></span>
        <p class="chat-panel panel-head-element interactive" id="chat-panel-user-count">NULL Users</p>
        <i class="chat-panel panel-head-element bi-caret-down-fill" id="chat-panel-users-toggle"></i>
    </div>
    <div class="chat-panel" id="chat-panel-main-div">
        <div class="active-cpanel cpanel-div" id="cpanel-active-div">
            <div class="active-cpanel cpanel-header-div" id="cpanel-active-header-div">
                <i class="active-cpanel cpanel-header-icon cpanel-pin-icon bi-pin-angle-fill" id="cpanel-active-pin-icon"></i>
                <p class="active-cpanel cpanel-title" id="cpanel-active-title">NULL PANEL</p>
                <span class="active-cpanel cpanel-title-spacer" id="cpanel-active-title-spacer"></span>
                <i class="active-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-active-popout-icon"></i>
                <i class="active-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-active-close-icon"></i>
                <div class="drag-handle right-drag-handle" id="cpanel-active-drag-handle">
                </div>
            </div>
            <div class="active-cpanel cpanel-doc" id="cpanel-active-doc">
            </div>
        </div>
        <div class="chat-panel" id="cpanel-pinned-splitter">
            <div class="pinned-cpanel cpanel-div" id="cpanel-pinned-div">
                <div class="pinned-cpanel cpanel-header-div" id="cpanel-pinned-header-div">
                    <i class="pinned-cpanel cpanel-header-icon cpanel-unpin-icon bi-pin-fill" id="cpanel-pinned-unpin-icon"></i>
                    <p class="pinned-cpanel cpanel-title" id="cpanel-pinned-title">NULL PANEL</p>
                    <span class="pinned-cpanel cpanel-title-spacer" id="cpanel-pinned-title-spacer"></span>
                    <i class="pinned-cpanel cpanel-header-icon cpanel-popout-icon bi-window-stack" id="cpanel-pinned-popout-icon"></i>
                    <i class="pinned-cpanel cpanel-header-icon cpanel-close-icon bi-x" id="cpanel-pinned-close-icon"></i>
                </div>
                <div class="pinned-cpanel cpanel-doc" id="cpanel-pinned-doc">
                </div>
            <div class="drag-handle right-drag-handle" id="cpanel-pinned-drag-handle">
            </div>
            </div>
            <div class="chat-panel" id="chat-area">
                <div class="chat-panel" id="chat-panel-buffer-div">
                </div>
                <div class="chat-panel control-prompt" id="chat-panel-control-div">
                    <i class="chat-panel chat-panel-control control-prompt bi-gear-fill" id="chat-panel-settings-icon"></i>
                    <i class="chat-panel chat-panel-control control-prompt bi-chat-left-quote-fill" id="chat-panel-pm-icon"></i>
                    <i class="chat-panel chat-panel-control control-prompt bi-magic" id="chat-panel-admin-icon" style="display:none;"></i>
                    <i class="chat-panel chat-panel-control control-prompt bi-images" id="chat-panel-emote-icon"></i>
                    <span id="chat-panel-prompt-span">
                        <p id="chat-panel-prompt-autocomplete" class="chat-panel"><span id="chat-panel-prompt-autocomplete-filler"></span><span id="chat-panel-prompt-autocomplete-display"></span></p>
                        <input class="chat-panel chat-panel-control control-prompt" id="chat-panel-prompt" placeholder="Chat...">
                    </span>
                    <button class="chat-panel chat-panel-control positive-button" id="chat-panel-send-button">Send</button>
                </div>
            </div>
        </div>
        <div class="chat-panel" id="chat-panel-users-div">
            <div class="drag-handle left-drag-handle" id="chat-panel-users-drag-handle">
            </div>
            <div class="chat-panel" id="chat-panel-users-list-div">
            </div>
        </div>
        </div>
    </div>
</div>