@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 required">

        {{-- Header de Sección --}}
        <div class="flex items-center gap-4 mb-8">
            <h2 class="text-xl font-black uppercase tracking-widest text-main-two dark:text-main-one">
                {{ __('Loom Accessories & Feeders') }}
            </h2>
            <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
        </div>

        {{-- Grid de Inputs --}}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <x-input inputmode="decimal" wire:model.defer="form.loomAccessories.n_frames" placeholder="{{ __('e.g. 4') }}"
                label="{{ __('Quantity Frames') }}" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.loomAccessories.n_healds"
                placeholder="{{ __('e.g. 8') }}" label="{{ __('Quantity healds') }}" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.loomAccessories.n_colors"
                placeholder="{{ __('e.g. 8') }}" label="{{ __('Quantity of Colors') }}" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.loomAccessories.n_weft_feeders"
                placeholder="{{ __('e.g. 4') }}" label="{{ __('Quantity Weft-feeders') }}" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.loomAccessories.n_droppers"
                placeholder="{{ __('e.g. 8000') }}" maxlength="10" label="{{ __('Quantity Droppers') }}" />
        </div>
    </div>
</div>