{{-- SettingsForm::groups() as cards (one column when $compact). Input names mirror the key: settings[branding][app_name] saves "branding.app_name". --}}
<fieldset @disabled($readonly ?? false) class="min-w-0 space-y-6">
    @foreach ($groups as $group)
        <x-admin.card :title="$group['title']">
            @if ($group['configured'] !== null)
                <x-slot:actions><x-admin.status :value="$group['configured'] ? 'active' : 'not_configured'" /></x-slot:actions>
            @endif

            @if ($group['note'])
                <p class="mb-4 flex items-start gap-2 text-sm text-gray-500 dark:text-gray-400">
                    <x-heroicon-o-information-circle class="mt-0.5 size-4 shrink-0" />
                    {{ $group['note'] }}
                </p>
            @endif

            <div @class(['grid grid-cols-1 gap-4', 'sm:grid-cols-2' => ! ($compact ?? false)])>
                @foreach ($group['fields'] as $key => $field)
                    @php($path = str_replace('.', '][', $key))
                    @php($name = "settings[{$path}]")
                    @php($id = 'setting_'.str_replace('.', '_', $key))
                    @php($input = $field['input'] ?? null)

                    @if ($field['type'] === 'boolean')
                        <div @class(['sm:col-span-2' => ! ($compact ?? false)])>
                            <x-admin.toggle :name="$name" :id="$id" :label="$field['label']" :hint="$field['hint'] ?? null" :checked="(bool) $field['value']" />
                        </div>
                    @elseif ($field['secret'] ?? false)
                        <x-admin.secret-input :name="$name" :id="$id" :clear-name="'clear['.$path.']'" :label="$field['label']"
                                              :saved-hint="$field['saved_hint']" :hint="$field['hint'] ?? null" />
                    @elseif ($field['type'] === 'file')
                        <x-admin.file-input :name="$name" :id="$id" :label="$field['label']" :preview="$field['value']" :accept="$field['accept']"
                                            :hint="$field['hint'] ?? null" :remove-name="$field['uploaded'] ? 'clear['.$path.']' : null" />
                    @elseif ($input === 'select')
                        <x-admin.select :name="$name" :id="$id" :label="$field['label']" :options="$field['options']" :value="$field['value']"
                                        :hint="$field['hint'] ?? null" required />
                    @elseif ($input === 'searchable-select')
                        @php($from = $field['options_from'] ?? null) {{-- a field in this group whose value picks the option set --}}
                        <x-admin.searchable-select :name="$name" :id="$id" :label="$field['label']" :value="$field['value']" :hint="$field['hint'] ?? null"
                                                   :options="$from ? $field['option_sets'][old('settings.'.$from, $group['fields'][$from]['value'])] ?? [] : $field['options']"
                                                   :creatable="$field['creatable'] ?? false" :source="$from ? 'settings['.str_replace('.', '][', $from).']' : null"
                                                   :option-sets="$from ? $field['option_sets'] : []" required />
                    @elseif ($input === 'color')
                        <div x-data="{ color: @js((string) old("settings.{$key}", $field['value'])) }">
                            <label for="{{ $id }}" class="form-label">{{ $field['label'] }}</label>
                            <div class="flex items-center gap-2">
                                <input type="color" x-model="color" aria-label="{{ $field['label'] }}"
                                       class="h-10 w-12 shrink-0 cursor-pointer rounded-lg border border-gray-300 bg-white p-1 dark:border-gray-700 dark:bg-gray-900">
                                <input type="text" name="{{ $name }}" id="{{ $id }}" x-model="color" maxlength="7" required
                                       @class(['form-control font-mono', '!border-red-500' => $errors->has("settings.{$key}")])>
                            </div>
                            @if ($field['hint'] ?? null)<p class="mt-1.5 text-xs text-gray-500 dark:text-gray-400">{{ $field['hint'] }}</p>@endif
                            @error("settings.{$key}")<p class="form-error">{{ $message }}</p>@enderror
                        </div>
                    @else
                        <x-admin.input :name="$name" :id="$id" :label="$field['label']" :hint="$field['hint'] ?? null" :value="$field['value']"
                                       :type="$input ?? ($field['type'] === 'string' ? 'text' : 'number')" :step="$field['type'] === 'float' ? 'any' : null"
                                       :required="in_array('required', $field['rules'], true)" />
                    @endif
                @endforeach
            </div>
        </x-admin.card>
    @endforeach
</fieldset>