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

<div class="tw-wrapper">
    <div
        class="bg-white/50 dark:bg-gray-800 rounded-2xl border border-gray-100 dark:border-gray-700 p-6 mb-8 shadow-sm transition-colors duration-300">

        {{-- Header de Sección con Descripción --}}
        <div class="mb-8">
            <div class="flex items-center gap-4">
                <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                    {{ __('Core Specifications') }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400 mt-2 italic">
                {{ __('Basic operational details and power requirements.') }}
            </p>
        </div>

        {{-- Grid de Inputs: Se mantiene la clase 'required' y la lógica de Livewire --}}
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 required">
            <x-input inputmode="decimal" wire:model.defer="form.machineSpecs.n_bars"
                placeholder="{{ __('Enter number of bars') }}" label="{{ __('N. Bars') }}" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.machineSpecs.n_fineness"
                placeholder="{{ __('Enter fineness number') }}" label="{{ __('N. Fineness') }}" maxlength="10" />

            <x-select :errorless="true" label="{{ __('Weaving Type') }}" placeholder="{{ __('Select Weaving Type') }}"
                wire:model="form.machineSpecs.weaving_type" :options="[
                    ['name' => 'Double Front', 'id' => 'double_front'],
                    ['name' => 'Mono Front', 'id' => 'mono_front'],
                ]" option-label="name" option-value="id" />

            <x-select :errorless="true" label="{{ __('Fabric Winder') }}" placeholder="{{ __('Select Fabric Winder') }}"
                wire:model="form.machineSpecs.fabric_winder" :options="[['name' => 'Tangencial', 'id' => 'tangencial'], ['name' => 'Loom', 'id' => 'loom']]" option-label="name" option-value="id" />

            <x-select :errorless="true" label="{{ __('Machine Movement') }}"
                placeholder="{{ __('Select Machine Movement') }}" wire:model="form.machineSpecs.machine_movement"
                :options="[['name' => 'Elastane', 'id' => 'elastane'], ['name' => 'Hard', 'id' => 'hard']]" option-label="name" option-value="id" />
        </div>
    </div>
</div>