<!--
 ~ Copyright 2022 youngmonkeys.org
 ~
 ~ Licensed under the ezyplatform, Version 1.0.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://youngmonkeys.org/licenses/ezyplatform-1.0.0.txt
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
-->

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<style th:fragment="styles">
.right-toolbar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1030;
    display: flex;
    flex-direction: column;
    width: 40px;
    background-color: #343a40;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: width 0.2s ease;
}

.right-toolbar.expanded {
    width: 200px;
}

.right-toolbar-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 100%;
    padding: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
}

.right-toolbar-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.right-toolbar-items {
    display: flex;
    flex-direction: column;
}

.right-toolbar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    color: #f8f9fa;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}

.right-toolbar-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.right-toolbar-item i {
    flex: 0 0 20px;
    text-align: center;
    font-size: 16px;
}

.right-toolbar-item span {
    display: none;
}

.right-toolbar.expanded .right-toolbar-item span {
    display: inline;
}

.right-toolbar-item.active i {
    color: #ffc107;
    border-radius: 50%;
}

.right-toolbar-expand-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 100%;
    margin-top: auto;
    padding: 0;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: transparent;
    color: #adb5bd;
    cursor: pointer;
}

.right-toolbar-expand-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.right-toolbar-expand-toggle i {
    transition: transform 0.2s ease;
}

.right-toolbar.expanded .right-toolbar-expand-toggle i {
    transform: rotate(180deg);
}

.right-toolbar-mini {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 1030;
    width: 26px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #343a40;
    border-radius: 8px 0 0 8px;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    color: #f8f9fa;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.right-toolbar-mini:active {
    opacity: 1;
}

@media (hover: hover) {
    .right-toolbar-mini:hover {
        opacity: 1;
    }
}
</style>
<th:block th:fragment="content">
    <div class="right-toolbar" id="rightToolbar">
        <button type="button" class="right-toolbar-close" id="rightToolbarCloseButton" th:title="#{close}">
            <i class="fas fa-times"></i>
        </button>
        <div class="right-toolbar-items" id="rightToolbarItems">
            <a href="javascript:void(0)" class="right-toolbar-item" id="rightToolbarDarkModeItem" th:title="#{dark_mode}">
                <i class="fas fa-moon" id="rightToolbarDarkModeIcon"></i>
                <span>[[#{dark_mode}]]</span>
            </a>
            <a href="javascript:void(0)" class="right-toolbar-item d-none" id="rightToolbarSystemDataTagManagementItem" th:title="#{data_tagging}">
                <i class="fas fa-tag" id="rightToolbarSystemDataTagManagementIcon"></i>
                <span>[[#{data_tagging}]]</span>
            </a>
            <!-- extension point: plugins push more tools here via the rightToolbarToolFragments model attribute -->
            <th:block th:if="${rightToolbarToolFragments != null}" th:each="rightToolbarToolFragment : ${rightToolbarToolFragments}">
                <th:block th:replace="~{${rightToolbarToolFragment} :: content}" />
            </th:block>
        </div>
        <button type="button" class="right-toolbar-expand-toggle" id="rightToolbarExpandToggle" th:title="#{open}">
            <i class="fas fa-chevron-left"></i>
        </button>
    </div>
    <div class="right-toolbar-mini d-none" id="rightToolbarMini" th:title="#{open}">
        <i class="fas fa-angle-double-left"></i>
    </div>
</th:block>
<script th:fragment="scripts">
ezyadmin.toggleRightToolbarDarkMode = function(enabled) {
    localStorage.setItem('darkMode', enabled);
    $('body').toggleClass('dark-mode', enabled);
    $('#rightToolbarDarkModeItem').toggleClass('active', enabled);
    $('#rightToolbarDarkModeIcon')
        .toggleClass('fa-moon', !enabled)
        .toggleClass('fa-sun', enabled);
    if (ezyadmin.applyThemeColor) {
        ezyadmin.applyThemeColor(localStorage.getItem('themeColor'));
    }
}

ezyadmin.initRightToolbar = function() {
    var $toolbar = $('#rightToolbar');
    var $closeButton = $('#rightToolbarCloseButton');
    var $expandToggle = $('#rightToolbarExpandToggle');
    var $mini = $('#rightToolbarMini');
    var $darkModeItem = $('#rightToolbarDarkModeItem');

    function collapseToolbar() {
        $toolbar.removeClass('expanded');
    }

    function minimizeToolbar() {
        collapseToolbar();
        $toolbar.addClass('d-none');
        $mini.removeClass('d-none');
        localStorage.setItem('rightToolbarMinimized', 'true');
    }

    function restoreToolbar() {
        $toolbar.removeClass('d-none');
        $mini.addClass('d-none');
        localStorage.setItem('rightToolbarMinimized', 'false');
    }

    $expandToggle.on('click', function() {
        $toolbar.toggleClass('expanded');
    });

    $closeButton.on('click', function(event) {
        event.stopPropagation();
        minimizeToolbar();
    });

    $mini.on('click', restoreToolbar);

    $(document).on('click', function(event) {
        var $target = $(event.target);
        if (!$target.closest('#rightToolbar').length) {
            collapseToolbar();
        }
    });

    $darkModeItem.on('click', function() {
        ezyadmin.toggleRightToolbarDarkMode(localStorage.getItem('darkMode') != 'true');
    });
    ezyadmin.toggleRightToolbarDarkMode(localStorage.getItem('darkMode') == 'true');

    if (localStorage.getItem('rightToolbarMinimized') == 'true') {
        $toolbar.addClass('d-none');
        $mini.removeClass('d-none');
    }
}

$(document).ready(function() {
    ezyadmin.initRightToolbar();
});
</script>
</body>
</html>
