@props([
    'group',
    'megaSidebar',
    'badges',
    'recent',
])

@php
    $gkey = preg_replace('/[^a-z0-9_-]/i', '-', (string) ($group['key'] ?? 'grp'));
    $ddId = 'erp-mega-'.$gkey;
    $groupKey = (string) ($group['key'] ?? '');
    $isGroupActive = $megaSidebar->groupHasActive($group);
    $items = $group['items'] ?? [];
    $isHr = $groupKey === 'hr';
    $hrSections = $isHr
        ? app(\App\Modules\Navigation\Services\HrMegaBrowseComposer::class)->compose($items)
        : [];
    $megaDir = ($isRtl ?? false) ? 'rtl' : 'ltr';
    $megaDirectionClass = ($isRtl ?? false) ? 'erp-mega-panel--rtl' : 'erp-mega-panel--ltr';
    $hrPanelClass = $isHr ? 'erp-mega-panel--hr' : '';
@endphp
<li class="header-nav-item dropdown">
    <a href="#" id="{{ $ddId }}-toggle" class="header-nav-link dropdown-toggle {{ $isGroupActive ? 'active' : '' }}"
        data-bs-toggle="dropdown" data-bs-auto-close="outside" data-bs-display="static"
        aria-expanded="false" aria-haspopup="true"
        aria-controls="{{ $ddId }}" onclick="event.preventDefault()">
        <i class="{{ $group['icon'] ?? 'fe fe-grid' }}" aria-hidden="true"></i>
        <span class="text-truncate erp-nav-module-label">{{ $group['label'] }}</span>
    </a>
    <div class="dropdown-menu erp-mega-panel {{ $megaDirectionClass }} {{ $hrPanelClass }} border-0 shadow"
        id="{{ $ddId }}" role="menu" dir="{{ $megaDir }}" aria-labelledby="{{ $ddId }}-toggle">
        @if ($isHr)
            <div class="erp-mega-hr">
                <div class="erp-mega-hr__main">
                    <x-ui.layout.partials.mega-group-browse :mega-sidebar="$megaSidebar" :badges="$badges"
                        :group-key="$groupKey" :items="$items" :hr-sections="$hrSections" />
                </div>
                <aside class="erp-mega-hr__rail" aria-label="{{ __('nav.mega.quick_actions') }}">
                    <div class="erp-mega-hr-rail-panel">
                        <x-ui.layout.partials.mega-group-quick-actions :group-key="$groupKey" />
                    </div>
                    <div class="erp-mega-hr-rail-panel erp-mega-hr-rail-panel--signals">
                        <x-ui.layout.partials.mega-group-signals :group-key="$groupKey" :badges="$badges"
                            :recent="$recent" />
                    </div>
                </aside>
            </div>
        @else
            <div class="container-fluid px-2 py-2">
                <div class="erp-mega-panel__columns">
                    <div class="erp-mega-panel__col erp-mega-panel__col--browse">
                        <x-ui.layout.partials.mega-group-browse :mega-sidebar="$megaSidebar" :badges="$badges"
                            :group-key="$groupKey" :items="$items" />
                    </div>
                    <div class="erp-mega-panel__col erp-mega-panel__col--quick">
                        <x-ui.layout.partials.mega-group-quick-actions :group-key="$groupKey" />
                    </div>
                    <div class="erp-mega-panel__col erp-mega-panel__col--signals">
                        <x-ui.layout.partials.mega-group-signals :group-key="$groupKey" :badges="$badges"
                            :recent="$recent" />
                    </div>
                </div>
            </div>
        @endif
    </div>
</li>
