{{define "widgets/side-btn.html"}}
<div class="side-btn-container">
    <button class="side-btn-item side-btn-scroll-top" data-action="scroll-top" title="回到顶部">
        <i class="i-material-symbols-vertical-align-top"></i>
    </button>
    {{if .IsAdmin}}
    <a class="side-btn-item" data-action="more" title="管理员" href="/admin" target="_blank">
        <i class="i-material-symbols-light-manage-accounts"></i>
    </a>
    {{end}}
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const scrollToTopBtn = document.querySelector('[data-action="scroll-top"]');

        // Initialize only scroll-top button as hidden
        if (scrollToTopBtn) {
            scrollToTopBtn.style.opacity = '0';
            scrollToTopBtn.style.visibility = 'hidden';
        }

        // Show/hide only scroll-top button based on scroll position
        window.addEventListener('scroll', function () {
            if (scrollToTopBtn) {
                const shouldShow = window.pageYOffset > 300;

                if (shouldShow) {
                    scrollToTopBtn.style.opacity = '1';
                    scrollToTopBtn.style.visibility = 'visible';
                } else {
                    scrollToTopBtn.style.opacity = '0';
                    scrollToTopBtn.style.visibility = 'hidden';
                }
            }
        });

        // Scroll to top functionality
        if (scrollToTopBtn) {
            scrollToTopBtn.addEventListener('click', function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
    });
</script>
{{end}}