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

<div class="tw-wrapper">
    <div
        class="bg-gray-50/30 dark:bg-gray-800 rounded-2xl shadow-sm border-y border-r border-gray-100 dark:border-gray-700 border-l-4 border-l-main-two dark:border-l-main-one p-6 mb-8 transition-all duration-500 ease-in-out">

        <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">
                    {{ __('Dobby Specifications') }}
                </h2>
                <div class="h-[1px] flex-1 bg-gray-100 dark:bg-gray-700"></div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <x-input wire:model.defer="form.dobbyDetails.dobby_model"
                label="{{ __('Dobby Model') }}" placeholder="e.g. Stäubli LX 100" />

            <x-input inputmode="decimal" wire:model.defer="form.dobbyDetails.total_levers"
                label="{{ __('Total Number of Levers on the Loom') }}" placeholder="e.g. 16" maxlength="10" />

            <x-input inputmode="decimal" wire:model.defer="form.dobbyDetails.levers_in_use"
                label="{{ __('Levers Installed/In Use on the Loom') }}" placeholder="e.g. 12" maxlength="10" />
        </div>
    </div>
</div>