<div class="d-flex justify-content-between align-items-center mb-3">
    <h6 class="fw-bold mb-0 text-muted">{{ $title }}</h6>
    <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#addMenuModal">
        <i class="bi bi-plus-circle me-1"></i> Add Item
    </button>
</div>

@if($items->isEmpty())
<div class="alert alert-light text-center text-muted py-4">
    <i class="bi bi-list-ul fs-3 d-block mb-2"></i>
    No menu items yet. Click "Add Item" to create one.
</div>
@else
<div class="table-responsive">
<table class="table table-bordered align-middle mb-0" style="font-size:14px">
    <thead class="table-light">
        <tr>
            <th style="width:50px">Order</th>
            <th>Label</th>
            <th>URL</th>
            <th style="width:130px">Route Name</th>
            <th style="width:110px">Icon</th>
            <th style="width:100px">Open In</th>
            <th style="width:90px" class="text-center">Enabled</th>
            <th style="width:60px"></th>
        </tr>
    </thead>
    <tbody>
    @foreach($items as $item)
    <tr>
        <td>
            <input type="number" name="items[{{ $item->id }}][sort_order]"
                value="{{ $item->sort_order }}"
                class="form-control form-control-sm text-center" style="width:55px">
        </td>
        <td>
            <input type="text" name="items[{{ $item->id }}][label]"
                value="{{ $item->label }}"
                class="form-control form-control-sm">
        </td>
        <td>
            <input type="text" name="items[{{ $item->id }}][url]"
                value="{{ $item->url }}"
                class="form-control form-control-sm">
        </td>
        <td>
            <input type="text" name="items[{{ $item->id }}][route_name]"
                value="{{ $item->route_name }}"
                class="form-control form-control-sm" placeholder="optional">
        </td>
        <td>
            <input type="text" name="items[{{ $item->id }}][icon]"
                value="{{ $item->icon }}"
                class="form-control form-control-sm" placeholder="bi-house">
        </td>
        <td>
            <select name="items[{{ $item->id }}][target]" class="form-select form-select-sm">
                <option value="_self" {{ $item->target === '_self' ? 'selected' : '' }}>Same Tab</option>
                <option value="_blank" {{ $item->target === '_blank' ? 'selected' : '' }}>New Tab</option>
            </select>
        </td>
        <td class="text-center">
            <div class="form-check form-switch d-flex justify-content-center">
                <input class="form-check-input" type="checkbox" role="switch"
                    name="items[{{ $item->id }}][is_enabled]"
                    {{ $item->is_enabled ? 'checked' : '' }}
                    style="width:2.2em;height:1.2em;cursor:pointer">
            </div>
        </td>
        <td class="text-center">
            <button type="button" class="btn btn-sm btn-outline-danger border-0"
                title="Delete"
                onclick="deleteMenuItem('{{ route('admin.menus.destroy', $item) }}')">
                <i class="bi bi-trash"></i>
            </button>
        </td>
    </tr>
    @endforeach
    </tbody>
</table>
</div>
@endif