@php
    $menuItem = $menuItem ?? [];
    $children = $menuItem['children'] ?? [];
@endphp
<div class="nav-editor-item mb-3" data-nav-item data-nav-kind="header" data-nav-scope data-index="{{ $h }}">
    <div class="row g-2 align-items-end mb-2">
        <div class="col-md-3">
            <label class="form-label">Menu label</label>
            <input class="form-control" name="header_menus[{{ $h }}][label]" value="{{ $menuItem['label'] ?? '' }}" placeholder="Company">
        </div>
        <div class="col-md-3">
            <label class="form-label">Top link</label>
            <input class="form-control" name="header_menus[{{ $h }}][url]" value="{{ $menuItem['url'] ?? '' }}" placeholder="/company/about">
        </div>
        <div class="col-md-2">
            <label class="form-label">Dropdown heading</label>
            <input class="form-control" name="header_menus[{{ $h }}][heading]" value="{{ $menuItem['heading'] ?? '' }}" placeholder="Optional">
        </div>
        <div class="col-md-2">
            <label class="form-label">Align</label>
            <select class="form-select" name="header_menus[{{ $h }}][align]">
                <option value="left" @selected(($menuItem['align'] ?? 'left') !== 'right')>Left</option>
                <option value="right" @selected(($menuItem['align'] ?? '') === 'right')>Right</option>
            </select>
        </div>
        <div class="col-md-2">
            <div class="nav-editor-tools">
                <button class="btn btn-sm btn-outline-secondary" type="button" data-nav-move="up">Up</button>
                <button class="btn btn-sm btn-outline-secondary" type="button" data-nav-move="down">Down</button>
                <button class="btn btn-sm btn-outline-danger" type="button" data-nav-remove>Remove</button>
            </div>
        </div>
        <div class="col-md-4">
            <input type="hidden" name="header_menus[{{ $h }}][wide]" value="0">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="header_menus[{{ $h }}][wide]" value="1" @checked(!empty($menuItem['wide']))>
                <label class="form-check-label">Wide dropdown (two columns)</label>
            </div>
        </div>
        <div class="col-md-8">
            <input type="hidden" name="header_menus[{{ $h }}][include_products]" value="0">
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="header_menus[{{ $h }}][include_products]" value="1" @checked(!empty($menuItem['include_products']))>
                <label class="form-check-label">Include catalog products in this dropdown</label>
            </div>
        </div>
    </div>
    <div class="d-flex justify-content-between align-items-center mb-2">
        <span class="text-muted">Submenu links</span>
        <button class="btn btn-sm btn-outline-primary" type="button" data-nav-add="child">Add submenu link</button>
    </div>
    <div class="nav-editor-children" data-nav-list="child">
        @foreach ($children as $c => $child)
            @include('admin.cms.navigation._child-item', ['h' => $h, 'c' => $c, 'child' => $child])
        @endforeach
    </div>
</div>