@php
    use App\Enums\RoleEnum;
    use Illuminate\Support\Str;
    use Illuminate\Support\Number;
@endphp

<x-page :title="__('countries')" :breadcrumbs="$breadcrumbs">
    <x-slot:headerActions>
        {{ $this->createAction }}

        {{--        <x-filament-actions::modals/>--}}
    </x-slot:headerActions>

    <div class="mx-auto flex flex-col w-full items-stretch gap-4">
        <div class="flex items-center justify-end">

        </div>

        <x-table class="w-full">
            <x-table.head class="bg-gray-50">
                <x-table.row>
                    <th scope="col" class="pl-4 sm:w-12 lg:pl-6">
                        <div class="flex h-6 items-center">
                            <label>
                                <input type="checkbox" wire:model.live="selectAll"
                                       class="h-4 w-4 rounded border-gray-300 shadow text-primary-600 focus:ring-primary-600">
                            </label>
                        </div>
                    </th>
                    <x-table.head-cell>{{ __('name') }}</x-table.head-cell>
                    <x-table.head-cell>{{ __('indicatif') }}</x-table.head-cell>
                    <x-table.head-cell class="text-center">{{ __('is_active') }}</x-table.head-cell>
                    <x-table.head-cell-action />
                </x-table.row>
            </x-table.head>
            <x-table.body>
                @forelse($this->countries as $country)
                    <x-table.row @class([
                            'bg-primary-50/80' => collect($this->selectedCountries)->contains($country['uuid'])])
                    >
                        <x-table.columns.text class="relative pl-4 lg:pl-6">
                            @if(collect($this->selectedCountries)->contains($country['uuid']))
                                <div class="absolute inset-y-0 left-0 w-0.5 bg-primary-600"></div>
                            @endif
                            <div class="flex h-6 items-center">
                                <label for="country-{{ $country['uuid'] }}" class="sr-only"></label>
                                <input id="country-{{ $country['uuid'] }}"
                                       type="checkbox"
                                       value="{{ $country['uuid'] }}"
                                       wire:model.live="selectedCountries"
                                       class="h-4 w-4 rounded border-gray-300 shadow text-primary-600 focus:ring-primary-600">
                            </div>
                        </x-table.columns.text>
                        <x-table.columns.text>
                            {{ $country['libelle'] }}
                        </x-table.columns.text>
                        <x-table.columns.text>
                            {{ $country['indicatif'] }}
                        </x-table.columns.text>
                        <x-table.columns.boolean
                            :state="\App\Enums\StateEnum::tryFrom($country['statut'])->getState()" />
                        <x-slot:actions wire:key="{{ $country['uuid'] }}">
                            <div class="flex justify-between gap-x-4">
                                {{ ($this->editAction)(['countryId' => $country['uuid']]) }}
                                {{ ($this->deleteAction())(['countryId' => $country['uuid']]) }}
                            </div>
                        </x-slot:actions>
                    </x-table.row>
                @empty
                @endforelse
            </x-table.body>
        </x-table>
    </div>
    <x-filament-actions::modals />
</x-page>