@props([
    'client' => null,
    'fullWidth' => false,
])

@php
    $colSpan = $fullWidth ? 'client-form-field--full' : '';
@endphp

<div id="spouse" class="{{ $colSpan }} scroll-mt-24 rounded-xl border border-slate-200 bg-slate-50/50 p-4 sm:col-span-2">
    <div class="mb-3">
        <h4 class="text-sm font-semibold text-slate-900">Spouse details</h4>
        <p class="mt-0.5 text-xs text-slate-500">Capture spouse details when applicable. Spouse consent is collected at loan application time.</p>
    </div>
    <div @class([
        'grid gap-4',
        'grid-cols-1' => $fullWidth,
        'grid-cols-1 sm:grid-cols-2' => ! $fullWidth,
    ])>
        <div>
            <x-input-label for="spouse_name" value="Spouse full name" />
            <x-text-input id="spouse_name" name="spouse_name" type="text" class="mt-1 block w-full" :value="old('spouse_name', $client?->spouse_name)" />
            <x-input-error class="mt-2" :messages="$errors->get('spouse_name')" />
        </div>
        <div class="min-w-0">
            <x-input-label for="spouse_phone" value="Spouse phone" />
            <x-phone-input id="spouse_phone" name="spouse_phone" :value="old('spouse_phone', $client?->spouse_phone)" />
            <x-input-error class="mt-2" :messages="$errors->get('spouse_phone')" />
        </div>
        <div @class(['sm:col-span-2' => ! $fullWidth])>
            <x-input-label for="spouse_id_number" value="Spouse ID number" />
            <x-text-input id="spouse_id_number" name="spouse_id_number" type="text" class="mt-1 block w-full" :value="old('spouse_id_number', $client?->spouse_id_number)" />
            <x-input-error class="mt-2" :messages="$errors->get('spouse_id_number')" />
        </div>
    </div>
</div>