@props([
	'items', // the collection (e.g., $airports, $users)
	'columns' => [], // array of [ 'label' => 'Name', 'field' => 'name', 'class' => '' ]
	'itemRoute' => null,
	'itemActions' => [],
	'currentSort' => null,
	'currentDir' => 'asc',
	])
<div class="overflow-x-auto bg-white rounded shadow"><table class="min-w-full border border-gray-200">
	<thead class="bg-gray-100"><tr>
		<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700 border-b">&nbsp;</th>
@foreach ($columns as $col)
	@php
		$field = $col['field'];
		$isSorted = $currentSort === $field;
		$newDir = ($isSorted && $currentDir === 'asc') ? 'desc' : 'asc';
	@endphp

	<th class="px-4 py-2 text-left text-sm font-semibold text-gray-700 border-b">
		@if(!empty($field))
			<a href="{{ request()->fullUrlWithQuery(['sort' => $field, 'direction' => $newDir]) }}"
			   class="flex items-center gap-1 hover:text-blue-700">
				{{ $col['label'] }}
				@if ($isSorted)
					<span class="text-xs">
						@if ($currentDir === 'asc') ▲ @else ▼ @endif
					</span>
				@endif
			</a>
		@else
			{{ $col['label'] }}
		@endif
	</th>
@endforeach
		<th class="px-4 py-2 text-right text-sm font-semibold text-gray-700 border-b">&nbsp;</th>
	</tr></thead>
	<tbody>
		@forelse($items as $item)
			<tr class="border-b hover:bg-gray-50">
				{{-- Edit --}}
				<td class="px-4 py-2 text-sm w-24">
					@if(in_array('edit', $itemActions))
						<a href="{{ route($itemRoute.'.edit', $item) }}" class="text-blue-600 hover:underline">Edit</a>
					@endif
				</td>
				{{-- Data cells --}}
				@foreach($columns as $col)