@php
    $amountLabel = $mapped['amount_requested']['label'] ?? 'Amount';
    $termLabel = $mapped['term_value']['label'] ?? 'Duration';
    $askLocked = (bool) ($askLocked ?? false);
    $askAmountLocked = (bool) ($askAmountLocked ?? $askLocked);
@endphp
<div class="space-y-1" data-loan-request-discovery-row>
    <div class="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <div data-field-key="{{ $mapped['amount_requested']['field_key'] ?? 'amount_requested' }}" data-is-core="{{ ($mapped['amount_requested']['is_core'] ?? false) ? '1' : '0' }}">
            <label for="amount_requested" class="mb-1 block text-xs font-semibold text-slate-600">{{ $amountLabel }}<span data-required-star class="ml-0.5 hidden font-semibold text-red-600" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span></label>
            <input
                id="amount_requested"
                name="amount_requested"
                type="text"
                inputmode="decimal"
                autocomplete="off"
                value="{{ old('amount_requested', $draftApplication?->amount_requested) }}"
                class="w-full rounded-lg border-slate-200 text-sm tabular-nums disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-600"
                x-model="requestedAmount"
                :readonly="@js($askAmountLocked)"
                :disabled="@js($askAmountLocked)"
                @input="onLoanRequestInput($event.target)"
                @change="onLoanRequestInput($event.target)"
            />
            @error('amount_requested')<p class="mt-1 text-xs text-red-600" data-loan-field-error="amount_requested">{{ $message }}</p>@enderror
            <p class="mt-1 text-xs text-red-600" x-show="amountRangeError !== ''" x-text="amountRangeError" x-cloak></p>
        </div>

        <div data-loan-discovery-installment-frequency @class(['pointer-events-none opacity-70' => $askLocked])>
            <label for="installment_frequency" class="mb-1 block text-xs font-semibold text-slate-600">Installment frequency</label>
            <select
                id="installment_frequency"
                class="w-full rounded-lg border-slate-200 text-sm disabled:cursor-not-allowed disabled:bg-slate-100 disabled:text-slate-600"
                x-model="installmentFrequency"
                :disabled="productRequestLocked || @js($askLocked)"
                @change="onInstallmentFrequencyChange()"
            >
                <option value="">Any frequency…</option>
                <option value="daily">Daily</option>
                <option value="weekly">Weekly</option>
                <option value="biweekly">Biweekly / Fortnightly</option>
                <option value="monthly">Monthly</option>
            </select>
        </div>

        <div data-field-key="{{ $mapped['term_value']['field_key'] ?? 'term_value' }}" data-is-core="{{ ($mapped['term_value']['is_core'] ?? false) ? '1' : '0' }}" @class(['pointer-events-none opacity-70' => $askLocked])>
            <label for="term_value" class="mb-1 block text-xs font-semibold text-slate-600">
                <span x-text="durationFieldLabel">{{ $termLabel }}</span><span data-required-star class="ml-0.5 hidden font-semibold text-red-600" aria-hidden="true">*</span><span data-optional-hint class="ml-1 text-xs font-normal text-slate-400">(optional)</span>
            </label>
            <input
                id="term_value"
                name="term_value"
                type="number"
                min="1"
                value="{{ old('term_value', $draftApplication?->term_value) }}"
                class="w-full rounded-lg border-slate-200 text-sm tabular-nums read-only:cursor-not-allowed read-only:bg-slate-100 read-only:text-slate-600"
                :placeholder="durationFieldPlaceholder"
                :readonly="productRequestLocked || @js($askLocked)"
                @keydown="if (productRequestLocked || @js($askLocked)) { $event.preventDefault(); }"
                @wheel="if (productRequestLocked || @js($askLocked)) { $event.preventDefault(); }"
                @input="onLoanRequestInput()"
                @change="onLoanRequestInput()"
            />
            @error('term_value')<p class="mt-1 text-xs text-red-600" data-loan-field-error="term_value">{{ $message }}</p>@enderror
        </div>
    </div>

    <input type="hidden" id="term_unit" name="term_unit" value="{{ old('term_unit', $draftApplication?->term_unit ?? '') }}" x-model="termUnit">

    <p class="text-[11px] text-amber-800 rounded border border-amber-200 bg-amber-50 px-2 py-1" x-show="durationEntryWarning !== ''" x-text="durationEntryWarning" x-cloak></p>
    <p class="text-[11px] text-sky-800 rounded border border-sky-200 bg-sky-50 px-2 py-1" x-show="productRequestLocked && productRequestLockHint !== ''" x-text="productRequestLockHint" x-cloak></p>
</div>