<nav class="flux-cms-navigation" data-navigation="{{ $navigation->name }}">
    @if($navigationItems->isNotEmpty())
        <ul class="navigation-items {{ $cssClasses }}">
            @foreach($navigationItems as $item)
                <li class="navigation-item {{ $item->hasChildren() ? 'has-children' : '' }} {{ $this->isActive($item) ? 'active' : '' }}"
                    data-item-id="{{ $item->id }}">

                    {{-- Item Link --}}
                    @if($item->page_id || $item->url)
                        <a href="{{ $item->getEffectiveUrl() }}"
                           @if($item->target) target="{{ $item->target }}" @endif
                           class="navigation-link {{ $this->isActive($item) ? 'active' : '' }}">
                            {{ $item->getTranslation('title', app()->getLocale()) }}
                        </a>
                    @else
                        <span class="navigation-text">
                            {{ $item->getTranslation('title', app()->getLocale()) }}
                        </span>
                    @endif

                    {{-- Sub-navigation --}}
                    @if($item->hasChildren() && $showSubmenus)
                        <ul class="sub-navigation">
                            @foreach($item->children as $child)
                                @if($child->is_active)
                                    <li class="sub-navigation-item {{ $this->isActive($child) ? 'active' : '' }}"
                                        data-item-id="{{ $child->id }}">

                                        @if($child->page_id || $child->url)
                                            <a href="{{ $child->getEffectiveUrl() }}"
                                               @if($child->target) target="{{ $child->target }}" @endif
                                               class="sub-navigation-link {{ $this->isActive($child) ? 'active' : '' }}">
                                                {{ $child->getTranslation('title', app()->getLocale()) }}
                                            </a>
                                        @else
                                            <span class="sub-navigation-text">
                                                {{ $child->getTranslation('title', app()->getLocale()) }}
                                            </span>
                                        @endif

                                        {{-- Third level navigation if needed --}}
                                        @if($child->hasChildren() && $maxDepth > 2)
                                            <ul class="sub-sub-navigation">
                                                @foreach($child->children as $grandchild)
                                                    @if($grandchild->is_active)
                                                        <li class="sub-sub-navigation-item {{ $this->isActive($grandchild) ? 'active' : '' }}"
                                                            data-item-id="{{ $grandchild->id }}">

                                                            @if($grandchild->page_id || $grandchild->url)
                                                                <a href="{{ $grandchild->getEffectiveUrl() }}"
                                                                   @if($grandchild->target) target="{{ $grandchild->target }}" @endif
                                                                   class="sub-sub-navigation-link {{ $this->isActive($grandchild) ? 'active' : '' }}">
                                                                    {{ $grandchild->getTranslation('title', app()->getLocale()) }}
                                                                </a>
                                                            @else
                                                                <span class="sub-sub-navigation-text">
                                                                    {{ $grandchild->getTranslation('title', app()->getLocale()) }}
                                                                </span>
                                                            @endif
                                                        </li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        @endif
                                    </li>
                                @endif
                            @endforeach
                        </ul>
                    @endif
                </li>
            @endforeach
        </ul>
    @else
        {{-- Empty navigation state --}}
        @if(config('app.debug'))
            <div class="navigation-empty text-gray-500 text-sm">
                Navigation "{{ $navigation->name }}" has no active items.
            </div>
        @endif
    @endif
</nav>

{{-- Default Styles (can be overridden in your theme) --}}
@pushOnce('styles')
<style>
    .flux-cms-navigation .navigation-items {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .flux-cms-navigation .navigation-item {
        position: relative;
    }

    .flux-cms-navigation .navigation-link,
    .flux-cms-navigation .navigation-text {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .flux-cms-navigation .navigation-link:hover {
        color: #2563eb;
    }

    .flux-cms-navigation .navigation-link.active {
        font-weight: 600;
        color: #2563eb;
    }

    .flux-cms-navigation .sub-navigation,
    .flux-cms-navigation .sub-sub-navigation {
        list-style: none;
        margin: 0;
        padding: 0;
        margin-left: 1rem;
    }

    .flux-cms-navigation .has-children > .navigation-link::after {
        content: '▼';
        font-size: 0.75em;
        margin-left: 0.5rem;
        opacity: 0.6;
    }

    /* Mobile-first responsive design */
    @media (max-width: 768px) {
        .flux-cms-navigation .sub-navigation {
            margin-left: 0;
            padding-left: 1rem;
        }
    }
</style>
@endPushOnce