@php
    $type = $meta['type'] ?? 'string';
    $isChild = $isChild ?? false;

    // Current value from bound state, fall back to config default
    $value = data_get($settingValues, $key);
    if ($value === null) {
        $value = $meta['default'] ?? '';
    }
    $boolVal = filter_var($value, FILTER_VALIDATE_BOOLEAN) ? '1' : '0';

    // Human readable label / description
    $label = $labels[$key] ?? ucwords(str_replace(['_', '-'], ' ', $key));

    // A sub setting is disabled while its parent (has_sub_settings) setting is off.
    $parentKey = $meta['parent_setting'] ?? null;
    $disabled = $parentKey !== null && !filter_var(data_get($settingValues, $parentKey), FILTER_VALIDATE_BOOLEAN);
@endphp

<tr
    class="flex justify-start transition-colors hover:bt-stone-50 {{ $isChild ? 'bt-stone-50/60' : '' }} {{ $disabled ? 'opacity-50' : '' }}">
    @if ($type === 'bool')
        {{-- Bool: toggle at the start of the row, label after --}}
        <td class="px-3 py-4 text-sm whitespace-nowrap {{ $isChild ? 'pl-14' : '' }}">
            <div class="flex items-center">
                @if ($isChild)
                    <span class="mr-2 text-stone-300">└</span>
                @endif
                <label
                    class="relative inline-flex items-center h-6 shrink-0 w-11 {{ $disabled ? 'cursor-not-allowed' : 'cursor-pointer' }}">
                    <input type="checkbox" wire:model.live="settingValues.{{ $key }}"
                        @checked($boolVal === '1') @disabled($disabled) aria-label="{{ $label }}"
                        class="sr-only peer" />
                    <span aria-hidden="true"
                        class="absolute inset-0 transition-colors duration-200 ease-in-out rounded-full bt-stone-200 ring-1 ring-inset rint-stone-900/5 peer-checked:bg-teal-600 peer-focus-visible:ring-2 peer-focus-visible:ring-teal-600"></span>
                    <span aria-hidden="true"
                        class="absolute w-5 h-5 transition-transform duration-200 ease-in-out bg-white rounded-full shadow pointer-events-none left-0.5 top-0.5 ring-1 rint-stone-900/5 peer-checked:translate-x-5"></span>
                    <svg viewBox="0 0 12 12" fill="none" aria-hidden="true"
                        class="absolute w-3 h-3 text-stone-400 transition duration-200 ease-in-out pointer-events-none left-1.5 top-1.5 peer-checked:translate-x-5 peer-checked:opacity-0">
                        <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <svg viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"
                        class="absolute w-3 h-3 transition duration-200 ease-in-out opacity-0 pointer-events-none text-teal-600 left-1.5 top-1.5 peer-checked:translate-x-5 peer-checked:opacity-100">
                        <path
                            d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
                    </svg>
                </label>
            </div>
        </td>
        <td class="px-3 py-4 text-sm font-medium text-stone-900">
            <div class="grid">
                <span>{{ $label }}</span>
                <span class="text-xs font-normal text-stone-400">{{ $key }}</span>
            </div>
        </td>
    @else
        {{-- Other types (select / numeric / text): label first, control at the end of the row --}}
        <td class="px-3 py-4 text-sm font-medium text-stone-900 {{ $isChild ? 'pl-14' : '' }}">
            <div class="flex items-center">
                @if ($isChild)
                    <span class="mr-2 text-stone-300">└</span>
                @endif
                <div class="grid">
                    <span>{{ $label }}</span>
                    <span class="text-xs font-normal text-stone-400">{{ $key }}</span>
                </div>
            </div>
        </td>
        <td class="px-3 py-4 text-sm text-right whitespace-nowrap">
            <div class="flex items-center justify-end">
                @switch($type)
                    @case('select')
                        <select wire:model.live="settingValues.{{ $key }}" @disabled($disabled)
                            class="block px-3 py-2 border bordet-stone-300 rounded-md shadow-sm focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm {{ $key === 'timezone' ? 'w-64' : 'w-40' }} {{ $disabled ? 'bg-stone-100 cursor-not-allowed' : '' }}">
                            @foreach ($meta['options'] ?? [] as $opt)
                                <option value="{{ $opt }}" @selected((string) $value === (string) $opt)>
                                    {{ $optionLabels[$key][$opt] ?? $opt }}
                                </option>
                            @endforeach
                        </select>
                    @break

                    @case('numeric')
                        <input type="number" wire:model.live="settingValues.{{ $key }}" value="{{ $value }}"
                            @disabled($disabled)
                            class="block w-40 px-3 py-2 border rounded-md shadow-sm bordet-stone-300 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm {{ $disabled ? 'bg-stone-100 cursor-not-allowed' : '' }}">
                    @break

                    @default
                        <input type="text" wire:model.live="settingValues.{{ $key }}" value="{{ $value }}"
                            @disabled($disabled)
                            class="block w-40 px-3 py-2 border rounded-md shadow-sm bordet-stone-300 focus:outline-none focus:ring-teal-500 focus:border-teal-500 sm:text-sm {{ $disabled ? 'bg-stone-100 cursor-not-allowed' : '' }}">
                @endswitch
            </div>
        </td>
    @endif
</tr>