<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-sidebar-bg px-6 pb-4">
    {# Logo #}
    <div class="flex h-16 shrink-0 items-center">
        <template x-if="sidebarOpen">
            <span class="text-xl font-bold text-white">Haber <span class="text-primary-400">CMS</span></span>
        </template>
        <template x-if="!sidebarOpen">
            <span class="text-xl font-bold text-primary-400">H</span>
        </template>
    </div>

    {# Navigation - Dynamically built from active modules #}
    <nav class="flex flex-1 flex-col">
        <ul role="list" class="flex flex-1 flex-col gap-y-1">

            {% set menu_items = module_menu_items() %}
            {% set current_route = app.request.attributes.get('_route') %}

            {# Main menu items (priority < 80) #}
            {% set main_items = menu_items|filter(i => i.priority < 80) %}
            {% set bottom_items = menu_items|filter(i => i.priority >= 80) %}

            {# Group separators: after news section (priority 20), after features (priority 55), after theme (priority 60) #}
            {% set prev_group = 0 %}
            {% for item in main_items %}
                {# Add separator between logical groups #}
                {% set current_group = 0 %}
                {% if item.priority <= 20 %}
                    {% set current_group = 1 %}
                {% elseif item.priority <= 45 %}
                    {% set current_group = 2 %}
                {% elseif item.priority <= 55 %}
                    {% set current_group = 3 %}
                {% else %}
                    {% set current_group = 4 %}
                {% endif %}

                {% if prev_group > 0 and current_group != prev_group %}
                    <li class="my-2">
                        <div class="border-t border-gray-700"></div>
                    </li>
                {% endif %}
                {% set prev_group = current_group %}

                <li>
                    <a href="{{ path(item.route) }}"
                       class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 {{ current_route starts with item.route|split('_index')[0] ? 'bg-sidebar-active text-white' : 'text-sidebar-text hover:bg-sidebar-hover hover:text-white' }}">
                        <i class="fas {{ item.icon }} w-6 text-center shrink-0"></i>
                        <span x-show="sidebarOpen">{{ item.label }}</span>
                    </a>
                </li>
            {% endfor %}

            {# Bottom section - settings, users, modules (priority >= 80) #}
            {% if bottom_items|length > 0 %}
                <li class="mt-auto">
                    <div class="border-t border-gray-700 mb-2"></div>
                    {% for item in bottom_items %}
                        <a href="{{ path(item.route) }}"
                           class="group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 {{ current_route starts with item.route|split('_index')[0] ? 'bg-sidebar-active text-white' : 'text-sidebar-text hover:bg-sidebar-hover hover:text-white' }}">
                            <i class="fas {{ item.icon }} w-6 text-center shrink-0"></i>
                            <span x-show="sidebarOpen">{{ item.label }}</span>
                        </a>
                    {% endfor %}
                </li>
            {% endif %}
        </ul>
    </nav>

    {# Plan Badge #}
    {% set plan = current_plan() %}
    <div x-show="sidebarOpen" class="border-t border-gray-700 pt-4">
        <div class="flex items-center gap-3 px-2 py-2 rounded-lg bg-white/5">
            {% if plan == 'starter' %}
                <div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-rocket text-green-400 text-xs"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-xs font-semibold text-green-400">Starter</p>
                    <p class="text-[10px] text-gray-400 truncate">Temel paket</p>
                </div>
            {% elseif plan == 'professional' %}
                <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-briefcase text-blue-400 text-xs"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-xs font-semibold text-blue-400">Professional</p>
                    <p class="text-[10px] text-gray-400 truncate">Profesyonel paket</p>
                </div>
            {% elseif plan == 'enterprise' %}
                <div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center flex-shrink-0">
                    <i class="fas fa-gem text-purple-400 text-xs"></i>
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-xs font-semibold text-purple-400">Enterprise</p>
                    <p class="text-[10px] text-gray-400 truncate">Kurumsal paket</p>
                </div>
            {% endif %}
        </div>
    </div>
    <div x-show="!sidebarOpen" class="border-t border-gray-700 pt-4 flex justify-center">
        {% if plan == 'starter' %}
            <div class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center" title="Starter Plan">
                <i class="fas fa-rocket text-green-400 text-xs"></i>
            </div>
        {% elseif plan == 'professional' %}
            <div class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center" title="Professional Plan">
                <i class="fas fa-briefcase text-blue-400 text-xs"></i>
            </div>
        {% elseif plan == 'enterprise' %}
            <div class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center" title="Enterprise Plan">
                <i class="fas fa-gem text-purple-400 text-xs"></i>
            </div>
        {% endif %}
    </div>
</div>
