@props([
    'menu',
    'active' => null,
    'subActive' => null,
    'level' => 0,
])

@php
    $hasChildren = $menu->children->count();
    $isExternal = str_contains($menu->target_url, 'http');

    $url = $hasChildren
        ? '#'
        : ($isExternal
            ? $menu->target_url
            : url($menu->target_url . $menu->target_slug . ($menu->action ?? '')));

    $submenuId = 'submenu-' . md5($menu->caption . $level);
@endphp

<li class="fluent-menu__item {{ $hasChildren ? 'is-parent' : '' }}">

    {{-- LINK / BUTTON --}}
    @if($hasChildren)
        <button
            type="button"
            class="fluent-menu__link
                {{ request()->is($menu->target_slug . '*') ? 'is-active' : '' }}"
            data-toggle="submenu"
            data-target="#{{ $submenuId }}"
        >
            <span class="fluent-menu__text">
                {{ strtoupper($menu->caption) }}
            </span>

            <span class="fluent-menu__caret">
                <x-fluent-icon name="chevron_down" size="xs" />
            </span>
        </button>
    @else
        <a
            href="{{ $url }}"
            class="fluent-menu__link
                {{ request()->is($menu->target_slug . '*') ? 'is-active' : '' }}"
            @if($isExternal) target="_blank" @endif
        >
            <span class="fluent-menu__text">
                {{ strtoupper($menu->caption) }}
            </span>
        </a>
    @endif

    {{-- CHILDREN (RECURSIVE) --}}
    @if($hasChildren)
        <div id="{{ $submenuId }}" class="fluent-menu__submenu">
            <ul class="fluent-menu fluent-menu--sub">
                @foreach($menu->children as $child)
                    <x-frontend.fluent-menu 
                        :menu="$child"
                        :active="$active"
                        :subActive="$subActive"
                        :level="$level + 1"
                    />
                @endforeach
            </ul>
        </div>
    @endif

</li>