@php
    $prefix = $mode === 'edit' ? 'edit_' : '';
    $passwordLabel = $mode === 'edit' ? 'Password baru (opsional)' : 'Password awal';
@endphp

<div>
    <label class="text-sm font-medium text-slate-700">Nama</label>
    <input wire:model.live="{{ $prefix }}name" type="text"
        class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-sky-400 focus:outline-none">
    @error($prefix . 'name')
        <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
    @enderror
</div>

<div class="grid gap-4 sm:grid-cols-2">
    <div>
        <label class="text-sm font-medium text-slate-700">Email</label>
        <input wire:model.live="{{ $prefix }}email" type="email"
            class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-sky-400 focus:outline-none">
        @error($prefix . 'email')
            <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="text-sm font-medium text-slate-700">Telepon</label>
        <input wire:model.live="{{ $prefix }}phone" type="text"
            class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-sky-400 focus:outline-none">
        @error($prefix . 'phone')
            <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
        @enderror
    </div>
</div>

<div class="grid gap-4 sm:grid-cols-2">
    <div>
        <label class="text-sm font-medium text-slate-700">Role</label>
        <select wire:model.live="{{ $prefix }}role"
            class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-sky-400 focus:outline-none">
            @foreach ($roles as $roleOption)
                <option value="{{ $roleOption->name }}">{{ $roleOption->name }}</option>
            @endforeach
        </select>
        @error($prefix . 'role')
            <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label class="text-sm font-medium text-slate-700">{{ $passwordLabel }}</label>
        <input wire:model.live="{{ $prefix }}password" type="text"
            class="mt-2 w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 focus:border-sky-400 focus:outline-none">
        @error($prefix . 'password')
            <p class="mt-2 text-sm text-rose-600">{{ $message }}</p>
        @enderror
    </div>
</div>

<label class="flex items-center gap-3 rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-700">
    <input wire:model.live="{{ $prefix }}is_active" type="checkbox" class="rounded border-slate-300 text-sky-600 focus:ring-sky-400">
    Akun aktif
</label>