@extends('layouts.admin')
@section('content')
    <div class="mb-6 flex flex-wrap items-center justify-between gap-3">
        <h2
            class="text-xl font-semibold text-gray-800 dark:text-white/90"
        >Gérer les membres de l'équipe technique</h2>

        <nav>
            <ol class="flex items-center gap-1.5">
                <li>
                    <a href="{{ route('admin.staff.create') }}"
                       class="inline-flex items-center gap-2 px-4 py-3 text-sm font-medium text-white transition rounded-lg bg-brand-500 shadow-theme-xs hover:bg-brand-600"
                    >
                        Ajouter un membre
                    </a>
                </li>
            </ol>
        </nav>
    </div>

    <div class="space-y-6">
        <x-admin.messages />

        <div
            class="overflow-hidden rounded-xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]"
        >
            <div class="max-w-full overflow-x-auto">
                <table class="min-w-full">
                    <!-- table header start -->
                    <thead>
                    <tr class="border-b border-gray-100 dark:border-gray-800">
                        <th class="px-5 py-3 sm:px-6">
                            <div class="flex items-center">
                                <p
                                    class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
                                >
                                    Nom du membre
                                </p>
                            </div>
                        </th>
                        <th class="px-5 py-3 sm:px-6">
                            <div class="flex items-center">
                                <p
                                    class="font-medium text-gray-500 text-theme-xs dark:text-gray-400"
                                >
                                    Fonction
                                </p>
                            </div>
                        </th>
                    </tr>
                    </thead>
                    <!-- table header end -->
                    <!-- table body start -->
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                    @forelse($staffs as $staff)
                        <tr>
                            <td class="px-5 py-4 sm:px-6">
                                <div class="flex items-center">
                                    <a href="{{ route('admin.staff.edit', ['id' => $staff->id]) }}" class="text-blue-light-500 text-theme-sm dark:text-blue-500">
                                        {{ $staff->name }}
                                    </a>
                                </div>
                            </td>
                            <td class="px-5 py-4 sm:px-6">
                                <div class="flex items-center">
                                    <p class="text-gray-500 text-theme-sm dark:text-gray-400">
                                        @if($staff->role === "volunteer")
                                            Bénévole
                                        @elseif($staff->role === "employed")
                                            Salarié
                                        @else
                                            Entraîneur
                                        @endif
                                    </p>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="2" class="px-5 py-4 sm:px-6"><p class="text-center dark:text-white">Aucun membre de l'équipe à afficher.</p></td>
                        </tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
@endsection