@php
    $val = fn (string $name): string => (string) old($name, $user?->{$name} ?? '');
    $dialogId = $mode === 'create' ? 'create-user' : 'edit-user-'.$user->id;
    $heading = $mode === 'create' ? 'Tambah User' : 'Update Informasi User';
    $submit = $mode === 'create' ? 'Simpan User' : 'Update User';
    $selectedLevel = old('level', $user?->level ?? 'pkbm');
    $selectedPkbm = old('id_pkbm', $user?->id_pkbm);
@endphp
<div class="pkbm-class-form-dialog__header flex items-start justify-between gap-3 border-b border-slate-100 p-5">
    <div class="flex items-start gap-3">
        <span class="pkbm-class-form-dialog__icon" aria-hidden="true"><i class="bi bi-person-gear"></i></span>
        <div>
            <h2 id="{{ $dialogId }}-title" class="sp-section-title">{{ $heading }}</h2>
            <p class="mt-1 text-xs text-slate-500">Atur kredensial dan level akses akun.</p>
        </div>
    </div>
    <button type="button" data-close-dialog class="pkbm-class-form-dialog__close grid size-8 shrink-0 place-items-center rounded-lg text-slate-500" aria-label="Tutup">
        <i class="bi bi-x-lg" aria-hidden="true"></i>
    </button>
</div>
<div class="space-y-4 p-5">
    <div>
        <label class="sp-form-label" for="{{ $dialogId }}-nama">Nama Lengkap</label>
        <input id="{{ $dialogId }}-nama" name="nama_lengkap" type="text" maxlength="100" required value="{{ $val('nama_lengkap') }}" class="sp-form-control px-3 py-2.5 text-sm">
    </div>
    <div class="grid gap-4 sm:grid-cols-2">
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-username">Username</label>
            <input id="{{ $dialogId }}-username" name="username" type="text" maxlength="50" autocomplete="off" required value="{{ $val('username') }}" class="sp-form-control px-3 py-2.5 text-sm">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-password">{{ $mode === 'create' ? 'Password' : 'Password Baru' }}</label>
            <input id="{{ $dialogId }}-password" name="password" type="password" minlength="6" autocomplete="new-password" @required($mode === 'create') class="sp-form-control px-3 py-2.5 text-sm" placeholder="{{ $mode === 'create' ? '' : 'Kosongkan jika tidak diganti' }}">
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-level">Level Akses</label>
            <select id="{{ $dialogId }}-level" name="level" required class="sp-form-control px-3 py-2.5 text-sm">
                @foreach (['fk' => 'FK (Admin Utama)', 'pkbm' => 'PKBM (Operator)', 'guru' => 'Guru'] as $key => $label)
                    <option value="{{ $key }}" @selected($selectedLevel === $key)>{{ $label }}</option>
                @endforeach
            </select>
        </div>
        <div>
            <label class="sp-form-label" for="{{ $dialogId }}-pkbm">Penempatan PKBM</label>
            <select id="{{ $dialogId }}-pkbm" name="id_pkbm" class="sp-form-control px-3 py-2.5 text-sm">
                <option value="">-- Tanpa PKBM --</option>
                @foreach ($institutions as $institution)
                    <option value="{{ $institution->id }}" @selected((string) $selectedPkbm === (string) $institution->id)>{{ $institution->nama_pkbm }}</option>
                @endforeach
            </select>
        </div>
    </div>
</div>
<div class="pkbm-class-form-dialog__footer flex justify-end gap-2 border-t border-slate-100 p-5">
    <button type="button" data-close-dialog class="sp-btn-secondary">Batal</button>
    <button type="submit" class="sp-btn-primary"><i class="bi bi-check2-circle" aria-hidden="true"></i>{{ $submit }}</button>
</div>