{{range $v := nav_menu}}
{{$styles := json_unmarshal_bytes $v.Style}}
{{$active := menu_active $v.Path $v.Children}}
{{if $v.Children}}
<div class="relative group" data-bj-menu-dropdown>
    {{if $v.Path}}
    <a href="{{$v.Path}}" target="{{$v.Target}}" title="{{$v.Title}}"
        class="vi-nav-link {{if $active}}is-active{{end}} text-sm font-medium whitespace-nowrap py-1"
        {{if $styles}}style="{{range $key, $val := $styles}}{{$key}}:{{$val}};{{end}}"{{end}}>
        {{$v.Title}}
    </a>
    {{else}}
    <button type="button"
        class="vi-nav-link {{if $active}}is-active{{end}} text-sm font-medium whitespace-nowrap py-1"
        {{if $styles}}style="{{range $key, $val := $styles}}{{$key}}:{{$val}};{{end}}"{{end}}>
        {{$v.Title}}
    </button>
    {{end}}
    <div class="absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto transition-opacity duration-200 z-50">
        <div class="relative py-2 bg-zinc-900 rounded-md shadow-2xl border border-zinc-800 overflow-hidden min-w-[140px]">
            <div class="absolute top-0 left-0 right-0 h-0.5 bg-gold-500"></div>
            <div class="flex flex-col gap-0.5 px-1 pt-1">
                {{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 text-sm rounded-md transition-colors text-left whitespace-nowrap {{if $childActive}}text-white bg-gold-500/20 font-medium{{else}}text-gray-300 hover:text-white hover:bg-gold-500/10{{end}}">
                    {{$c.Title}}
                </a>
                {{end}}
            </div>
        </div>
    </div>
</div>
{{else}}
<a href="{{$v.Path}}" target="{{$v.Target}}" title="{{$v.Title}}"
    class="vi-nav-link {{if $active}}is-active{{end}} text-sm font-medium whitespace-nowrap py-1"
    {{if $styles}}style="{{range $key, $val := $styles}}{{$key}}:{{$val}};{{end}}"{{end}}>
    {{$v.Title}}
</a>
{{end}}
{{end}}