{{range $v := nav_menu}}
{{$styles := json_unmarshal_bytes $v.Style}}
{{$active := menu_active $v.Path $v.Children}}
{{if $v.Children}}
<div class="space-y-1" data-bj-menu-group>
    <button type="button" data-bj-menu-toggle aria-expanded="false"
        class="w-full flex items-center justify-between px-4 py-3 rounded-md transition-colors group {{if $active}}bg-amber-500/10 text-white{{else}}text-gray-300 hover:text-white hover:bg-white/10{{end}}"
        {{if $styles}}style="{{range $key, $val := $styles}}{{$key}}:{{$val}};{{end}}"{{end}}>
        <span class="flex items-center gap-3 min-w-0">
            {{if $v.Icon}}{{if $active}}{{template "menu_icon" (dict "name" $v.Icon "class" "w-5 h-5 shrink-0 text-amber-500")}}{{else}}{{template "menu_icon" (dict "name" $v.Icon "class" "w-5 h-5 shrink-0 text-gray-400 group-hover:text-amber-500 transition-colors")}}{{end}}{{end}}
            <span class="text-base font-medium {{if $active}}font-bold{{end}}">{{$v.Title}}</span>
        </span>
        <svg data-bj-menu-chevron class="w-4 h-4 shrink-0 transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
        </svg>
    </button>
    <div data-bj-menu-sub class="hidden px-2 pb-1">
        <div class="relative rounded-md border border-zinc-800 bg-zinc-900/80 overflow-hidden">
            <div class="h-0.5 bg-amber-600"></div>
            <div class="{{if gt (len $v.Children) 1}}grid grid-cols-2{{else}}grid grid-cols-1{{end}} gap-2 p-3">
                {{range $c := $v.Children}}
                {{$childActive := menu_link_active $c.Path}}
                <a href="{{$c.Path}}" target="{{$c.Target}}" title="{{$c.Title}}"
                    class="block px-3 py-2.5 rounded-md text-sm font-medium transition-colors text-center {{if $childActive}}text-white bg-white/10{{else}}text-gray-300 hover:text-white hover:bg-white/10{{end}}">
                    {{$c.Title}}
                </a>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{else}}
<a href="{{$v.Path}}" target="{{$v.Target}}" title="{{$v.Title}}"
    class="flex items-center gap-3 px-4 py-3 rounded-md transition-all duration-200 group {{if $active}}bg-amber-500/10 text-white{{else}}text-gray-300 hover:text-white hover:bg-white/10{{end}}"
    {{if $styles}}style="{{range $key, $val := $styles}}{{$key}}:{{$val}};{{end}}"{{end}}>
    {{if $v.Icon}}{{if $active}}{{template "menu_icon" (dict "name" $v.Icon "class" "w-5 h-5 shrink-0 text-amber-500")}}{{else}}{{template "menu_icon" (dict "name" $v.Icon "class" "w-5 h-5 shrink-0 text-gray-400 group-hover:text-amber-500 transition-colors")}}{{end}}{{end}}
    <span class="text-base font-medium {{if $active}}font-bold{{end}}">{{$v.Title}}</span>
</a>
{{end}}
{{end}}