{% load static %}
<link rel="stylesheet" href="{% static 'microsys/sidebar/css/main.css' %}?v=20260426a">
{% if sidebar_toolbar_enabled and sidebar_theme_picker_enabled %}
<link rel="stylesheet" href="{% static 'microsys/sidebar/css/theme_picker.css' %}?v=20260412c">
{% endif %}
{% if sidebar_toolbar_enabled and sidebar_reorder_enabled %}
<link rel="stylesheet" href="{% static 'microsys/sidebar/css/reorder.css' %}?v=20260402k">
{% endif %}
<script src="{% static 'microsys/sidebar/js/main.js' %}?v=20260426a" nonce="{{ request.csp_nonce }}" defer></script>
{% if sidebar_toolbar_enabled and sidebar_theme_picker_enabled %}
<script src="{% static 'microsys/sidebar/js/theme_picker.js' %}?v=20260426a" nonce="{{ request.csp_nonce }}" defer></script>
{% endif %}
{% if sidebar_toolbar_enabled and sidebar_reorder_enabled %}
<script src="{% static 'microsys/sidebar/js/reorder.js' %}?v=20260402k" nonce="{{ request.csp_nonce }}" defer></script>
{% endif %}
<!-- Ghost Sidebar for small screens layout stability -->
{% if request.user.is_authenticated %}
<!-- <div class="sidebar-ghost"></div> -->

<!-- sidebar.html -->
<div class="col-auto flex-column shadow-sm sidebar {% if sidebar_collapsed %}collapsed{% endif %} no-print" 
     id="sidebar" 
     data-toggle-url="{% url 'toggle_sidebar' %}"
     data-session-collapsed="{{ sidebar_collapsed|yesno:'true,false' }}"
     data-sidebar-density="{{ sidebar_density|default:sidebar.density|default:'balanced' }}"
     data-sidebar-default-density="{{ sidebar.density|default:'balanced' }}"
     data-sidebar-show-icons="{% if sidebar.show_icons %}true{% else %}false{% endif %}"
     data-sidebar-collapse-mode="{{ sidebar.collapse_mode|default:'icons' }}"
     data-sidebar-allow-user-density="{% if sidebar.allow_user_density %}true{% else %}false{% endif %}">
    <script nonce="{{ request.csp_nonce }}">
        // Immediate FOUC fix for small screens
        (function() {
            var screenWidth = window.innerWidth;
            var sidebar = document.currentScript.parentElement;
            if (screenWidth < 1100) {
                sidebar.classList.add('collapsed');
                // Temporarily disable transition to avoid "sliding shut" flicker on load
                sidebar.style.transition = 'none';
                setTimeout(function() { sidebar.style.transition = ''; }, 100);
            }
        })();
    </script>
    <div class="sidebar-items-wrapper">
        <div class="list-group flex-shrink-0">
            {% block items %}
        
        <!-- DEFAULT CONTENT / INSTRUCTIONS -->
        <!-- <div class="p-3 text-center text-muted">
            <i class="bi bi-info-circle mb-2" style="font-size: 24px;"></i>
            <p class="small">
                <strong>Default Sidebar</strong><br>
                To customize this menu, create a template extending:<br>
                <code>sidebar/main.html</code><br>
                and override the <code>items</code> block.
            </p>
        </div> -->

        <!-- <a href="#" class="list-group-item list-group-item-action">
            <i class="bi bi-house me-2" style="font-size: 24px;"></i>
            <span>Example Home</span>
        </a> -->
        
        {% endblock %}
    </div>
    </div>

    {% if sidebar_toolbar_enabled %}
    <!-- Sidebar Toolbar (Theme Picker, Reorder, etc.) -->
    <div class="sidebar-toolbar no-print">
        {% if sidebar_has_sections_manager %}
        <a href="{% url 'manage_sections' %}" class="sidebar-toolbar-link" title="{{ MS_TRANS.sidebar_sections_manager_tooltip|default:MS_TRANS.manage_sections }}">
            <i class="bi bi-diagram-3"></i>
        </a>
        {% endif %}
        {% if sidebar_reorder_enabled %}
        <button type="button" class="reorder-toggle" id="sidebarReorderToggle" title="{{ MS_TRANS.sidebar_reorder }}" aria-label="{{ MS_TRANS.sidebar_reorder }}">
            <i class="bi bi-arrows-move"></i>
        </button>
        {% endif %}
        {% if sidebar_density_picker_enabled %}
        <div class="sidebar-density-control">
            <button type="button" class="sidebar-density-indicator" id="sidebarDensityIndicator" title="{{ MS_TRANS.sidebar_density_runtime|default:MS_TRANS.sidebar_density|default:'Sidebar density' }}" aria-label="{{ MS_TRANS.sidebar_density_runtime|default:MS_TRANS.sidebar_density|default:'Sidebar density' }}">
                <i class="bi bi-layout-sidebar-inset"></i>
            </button>
            <div class="sidebar-density-popup" id="sidebarDensityPopup">
                <div class="small fw-bold mb-2 text-center border-bottom pb-1">{{ MS_TRANS.sidebar_density_runtime|default:MS_TRANS.sidebar_density|default:'Sidebar density' }}</div>
                <div class="sidebar-density-popup__options">
                    {% for value, _label in MICROSYS_TABLE_DENSITIES %}
                    <button type="button" class="sidebar-density-chip{% if sidebar_density == value %} is-active{% endif %}" data-sidebar-density-choice="{{ value }}">
                        {% if value == 'dense' %}
                        <i class="bi bi-list-ul"></i>
                        {% elif value == 'roomy' %}
                        <i class="bi bi-distribute-vertical"></i>
                        {% else %}
                        <i class="bi bi-layout-sidebar-inset"></i>
                        {% endif %}
                    </button>
                    {% endfor %}
                </div>
            </div>
        </div>
        {% endif %}
        {% if sidebar_theme_picker_enabled %}
        <i class="bi bi-chevron-up theme-arrow" id="sidebarThemeArrow"></i>
        <div class="current-theme-indicator" id="sidebarThemeIndicator" title="{{ MS_TRANS.theme_change }}"></div>
        <div class="theme-popup" id="sidebarThemePopup">
            <div class="small fw-bold mb-2 text-center border-bottom pb-1">{{ MS_TRANS.theme_pick_color }}</div>
            <div class="theme-options-grid">
                {% for theme in MICROSYS_THEMES %}
                <div class="theme-option-circle" data-theme="{{ theme.slug }}" title="{{ theme.label }}" style="{{ theme.preview_style }}"></div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endif %}