<x-admin-layout title="Coaches">
    <x-admin.panel>
        <x-admin.table-toolbar
            title="All Coaches"
            :total="$items->count()"
            :create-route="route('admin.coaches.create')"
            create-label="Add Coach"
        />
        <x-admin.table>
            <thead>
                <tr class="border-b border-gray-100 bg-gray-50/60">
                    <th class="text-left px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Coach</th>
                    <th class="text-left px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Role</th>
                    <th class="text-left px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Sort</th>
                    <th class="text-left px-3 py-3 text-xs font-semibold text-gray-500 uppercase tracking-wide">Status</th>
                    <th class="w-24 px-3 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @foreach ($items as $item)
                    <tr class="admin-table-row group">
                        <td class="px-3 py-3">
                            <div class="flex items-center gap-2.5">
                                @if ($item->photo_path)
                                    <img src="{{ $item->photoUrl() }}" class="w-8 h-8 rounded-full object-cover" alt="">
                                @else
                                    <div class="w-8 h-8 rounded-full bg-brass flex items-center justify-center text-white text-xs font-bold">
                                        {{ strtoupper(substr($item->name, 0, 2)) }}
                                    </div>
                                @endif
                                <span class="font-medium text-gray-800 text-sm">{{ $item->name }}</span>
                            </div>
                        </td>
                        <td class="px-3 py-3 text-gray-500">{{ $item->role }}</td>
                        <td class="px-3 py-3 text-gray-500">{{ $item->sort_order }}</td>
                        <td class="px-3 py-3"><x-admin.status-badge :active="$item->is_active" /></td>
                        <x-admin.row-actions
                            :edit-route="route('admin.coaches.edit', $item)"
                            :destroy-route="route('admin.coaches.destroy', $item)"
                        />
                    </tr>
                @endforeach
            </tbody>
        </x-admin.table>
        <x-admin.table-footer :count="$items->count()" noun="coaches" />
    </x-admin.panel>
</x-admin-layout>
