@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">
                    {{ __('Quantity & Pricing Details') }}
                </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">
                {{ __('Specify the price range, currency, and available quantity.') }}
            </p>
        </div>

        {{-- Grid de Inputs: 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.priceInfo.price_range" label="{{ __('Price Range') }}"
                placeholder="1000 - 2000" maxlength="20" />

            {{-- Select Asíncrono --}}
            <x-select :errorless="true" label="{{ __('Currency') }}" wire:model.defer="form.priceInfo.currency_id"
                placeholder="{{ __('Select Currency') }}" :async-data="[
                    'api' => route('api.currencies.index'),
                    'method' => 'GET',
                    'params' => [],
                ]" option-value="id" option-label="name" />

            {{-- Quantity (Ancho completo en el grid) --}}
            <div class="md:col-span-2">
                <x-input inputmode="decimal" wire:model.defer="form.priceInfo.quantity"
                    placeholder="{{ __('Enter quantity') }}" label="{{ __('Quantity') }}" maxlength="10" />
            </div>
        </div>
    </div>
</div>