@php
    $k = $f['k']; $label = $f['l']; $type = $f['t']; $help = $f['h'] ?? null;
    $val = $v($k);
    $col = ($f['col'] ?? 'half') === 'full' ? 'md:col-span-2' : '';
    if ($type === 'select' && isset($f['o']) && count($f['o']) > 3) $col = 'md:col-span-2';
@endphp

<div class="{{ $col }}">
    <label class="label">{{ $label }}</label>

    @if($type === 'toggle')
        @php $on = (string) $val === '1'; @endphp
        <label class="flex items-center gap-3 cursor-pointer select-none">
            <input type="hidden" name="settings[{{ $k }}]" value="0">
            <input type="checkbox" name="settings[{{ $k }}]" value="1" @checked($on) class="peer sr-only">
            <span class="relative h-6 w-11 rounded-full bg-outline transition-colors peer-checked:bg-primary
                         after:absolute after:left-0.5 after:top-0.5 after:h-5 after:w-5 after:rounded-full
                         after:bg-white after:transition-transform peer-checked:after:translate-x-5"></span>
            <span class="text-small text-muted peer-checked:text-ink">{{ $label }}</span>
        </label>

    @elseif($type === 'select')
        <select name="settings[{{ $k }}]" class="field">
            @foreach($f['o'] as $ov => $ol)
            <option value="{{ $ov }}" @selected((string) $val === (string) $ov)>{{ $ol }}</option>
            @endforeach
        </select>

    @elseif($type === 'textarea')
        <textarea name="settings[{{ $k }}]" rows="{{ str_contains($k, 'template') || str_contains($k, 'embed') ? 4 : 2 }}"
                  class="field {{ str_contains($k, 'template') || str_contains($k, 'embed') ? 'font-mono text-sm' : '' }}">{{ $val }}</textarea>

    @elseif($type === 'color')
        <div class="flex items-center gap-2" x-data="{ c: @js($val ?: '#F0562D') }">
            <input type="color" x-model="c" class="h-10 w-12 rounded-lg border border-outline bg-surface-1 p-1">
            <input name="settings[{{ $k }}]" x-model="c" class="field font-mono">
        </div>

    @elseif($type === 'password')
        @php $filled = filled($val); @endphp
        <div class="relative" x-data="{ show: false }">
            <input :type="show ? 'text' : 'password'" name="settings[{{ $k }}]" value=""
                   placeholder="{{ $filled ? '•••••••• tersimpan (kosongkan jika tidak diubah)' : 'Belum diatur' }}"
                   autocomplete="new-password" class="field !pr-11">
            <button type="button" @click="show=!show" class="absolute right-3 top-1/2 -translate-y-1/2 text-muted hover:text-ink" tabindex="-1">
                <span x-show="!show"><x-icon name="search" class="w-4 h-4"/></span>
                <span x-show="show" x-cloak><x-icon name="check" class="w-4 h-4"/></span>
            </button>
        </div>

    @else
        <input name="settings[{{ $k }}]" value="{{ $val }}" class="field"
               placeholder="{{ $f['ph'] ?? '' }}">
    @endif

    @if($help)<p class="mt-1.5 text-caption text-muted">{!! e($help) !!}</p>@endif
</div>