@php use App\Enums\TableStatus; @endphp
<div class="space-y-6">
    @include('livewire.forms.area-form')

    <div class="grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2">

        <div>
            <x-ui.input.text wire:model="form.name" :label="__('dashboard.name')" type="text" autocomplete="form.name"
                placeholder="Name" />
        </div>



        <div>
            <x-ui.input.select :label="__('dashboard.area')" wire:model="form.area_id" group="true" :placeholderValue="__('dashboard.select')">
                <option value="">{{ __('dashboard.select_area') }}</option>
                @foreach ($areas as $area)
                    <option value="{{ $area->id }}" >{{ $area->name }}</option>
                @endforeach
                <x-slot name="action">
                    @can('create', \App\Models\Area::class)
                        <x-ui.button.ghost wire:loading.attr="disabled" id="copy-button" wire:click="$set('addArea',true)"
                            class="absolute top-1/2 right-0 inline-flex z-99 -translate-y-1/2 cursor-pointer items-center gap-1 border-l border-gray-200 py-3 pr-3 pl-3 text-sm font-medium text-gray-700 dark:border-gray-800 dark:text-gray-400">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-4">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
                            </svg>
                        </x-ui.button.ghost>
                    @endcan
                </x-slot>
            </x-ui.input.select>
        </div>
        <div>
            <x-ui.input.text wire:model="form.capacity" :label="__('dashboard.capacity')" type="number" autocomplete="form.capacity"
                placeholder="Capacity" />
        </div>
        <div>
            <x-ui.input.select :label="__('dashboard.status')" wire:model="form.status">
                @foreach (TableStatus::options() as $status)
                    <option value="{{ $status['value'] }}">{{ $status['label'] }}</option>
                @endforeach
            </x-ui.input.select>
        </div>


    </div>
</div>