@props(['mode' => 'user', 'form' => null])

@if ($mode === 'admin')
    <div class="tw-wrapper">
        <div class="space-y-6">
            {{-- Panel de Control de Publicación --}}
            <div
                class="md:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-8 bg-white/50 dark:bg-gray-900/40 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 mb-6 shadow-sm transition-colors duration-300">

                <div class="space-y-3">
                    <label class="block text-xs font-black uppercase tracking-widest text-main-two dark:text-main-one">
                        {{ __('Publication Status') }}
                    </label>
                    <div
                        class="bg-white/50  dark:bg-gray-800 p-4 rounded-xl border border-gray-100 dark:border-gray-700 shadow-inner">
                        <x-toggle wire:model="form.is_published" label="{{ __('Publish Machine') }}"
                            description="{{ __('Visible to all site visitors.') }}" lg
                            class="font-semibold text-gray-700 dark:text-gray-300" />
                    </div>
                </div>

                <div class="space-y-3">
                    <label class="block text-xs font-black uppercase tracking-widest text-main-two dark:text-main-one">
                        {{ __('Sale Status') }}
                    </label>
                    <x-select wire:model="form.sale_status" :options="collect(App\Enums\SaleUsedMachineStatusEnum::cases())
                        ->map(fn($s) => ['id' => $s->value, 'name' => $s->label()])
                        ->toArray()" option-label="name" option-value="id"
                        placeholder="{{ __('Select Status') }}" class="shadow-sm" />
                </div>
            </div>

            {{-- Selector de Tipo de Máquina --}}
            <div
                class="bg-white/50 dark:bg-gray-800 p-6 rounded-2xl border border-gray-100 dark:border-gray-700 shadow-sm">
                <div class="flex items-center gap-4 mb-6">
                    <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                        {{ __('Category Configuration') }}
                    </h2>
                    <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
                </div>

                <x-select label="{{ __('Machine Type') }}" placeholder="{{ __('Select machine type') }}"
                    wire:model.live="form.type_of_machine" :options="[
                        ['id' => 'weaving', 'name' => 'Weaving'],
                        ['id' => 'knitting', 'name' => 'Knitting'],
                        ['id' => 'other', 'name' => 'Other'],
                    ]" option-label="name" option-value="id"
                    required />
            </div>
        </div>
    </div>
@endif