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

<div class="tw-wrapper">
    <div
        class=" dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8 transition-colors duration-300">
        <div class="border-b border-gray-200 dark:border-gray-700 pb-4 mb-6">
            <h2 class="text-xl font-bold text-main-two dark:text-main-one">{{ __('Beams, Flanges & Rollers') }}</h2>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div
                class="space-y-4 bg-gray-50 dark:bg-gray-900/50 p-4 rounded-lg border border-gray-100 dark:border-gray-700 shadow-sm">

                <x-toggle wire:model.live="form.beamsAndRollers.has_cloth_roller"
                    label="{{ __('Includes Cloth Roller?') }}" lg />

                @if ($form->beamsAndRollers['has_cloth_roller'] ?? false)
                    <div class="animate-in fade-in duration-200">
                        <x-input inputmode="decimal" wire:model.defer="form.beamsAndRollers.cloth_roller_quantity"
                            label="{{ __('Quantity Rollers') }}" placeholder="{{ __('e.g. 2.00') }}" maxlength="10" />
                    </div>
                @endif

                <div class="pt-2">
                    <x-toggle wire:model.live="form.beamsAndRollers.batching_motion"
                        label="{{ __('Batching Motion Included?') }}" lg />
                </div>
            </div>

            <div
                class="space-y-4 bg-gray-50 dark:bg-gray-900/50 p-4 rounded-lg border border-gray-100 dark:border-gray-700 shadow-sm required">
                <div class="grid grid-cols-2 gap-4">
                    <x-input inputmode="decimal" wire:model.defer="form.beamsAndRollers.n_lower_beams"
                        label="{{ __('No. Lower Beams') }}" placeholder="{{ __('e.g. 1.00') }}" maxlength="10" />
                    <x-input inputmode="decimal" wire:model.defer="form.beamsAndRollers.n_upper_beams"
                        label="{{ __('No. Upper Beams') }}" placeholder="{{ __('e.g. 1.00') }}" maxlength="10" />
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <x-input inputmode="decimal" wire:model.defer="form.beamsAndRollers.n_lower_flange_diameter"
                        label="{{ __('Lower Flange Diam.') }}" placeholder="{{ __('e.g. 800.00') }}" maxlength="10" />
                    <x-input inputmode="decimal" wire:model.defer="form.beamsAndRollers.n_upper_flange_diameter"
                        label="{{ __('Upper Flange Diam.') }}" placeholder="{{ __('e.g. 800.00') }}" maxlength="10" />
                </div>
            </div>
        </div>
    </div>
</div>