@php($u = $user ?? null)
<div
    class="grid gap-4 sm:grid-cols-2"
    x-data="{ userType: String(@js((int) old('user_type', ($u && (int) $u->user_type === 2) ? 2 : 0))) }"
>
    <div class="sm:col-span-2">
        <label class="admin-label">{{ __('admin.user_avatar') }}</label>
        @if ($u?->avatar)
            <p class="mb-2">
                <img src="{{ \App\Support\UserAvatar::url($u->avatar) }}" alt="" class="h-20 w-20 rounded-full object-cover ring-2 " />
            </p>
        @endif
        <input type="file" name="avatar" accept="image/*" class="admin-input" />
        <p class="mt-1 text-xs text-slate-500">{{ __('admin.user_avatar_hint') }}</p>
    </div>
    <div><label class="admin-label">{{ __('admin.name') }}</label><input name="name" value="{{ old('name', $u?->name) }}" class="admin-input" required /></div>
    <div><label class="admin-label">{{ __('admin.mobile') }}</label><input name="mobile" value="{{ old('mobile', $u?->mobile) }}" class="admin-input" required /></div>
    <div><label class="admin-label">{{ __('admin.email') }}</label><input type="email" name="email" value="{{ old('email', $u?->email) }}" class="admin-input" /></div>
    <div><label class="admin-label">{{ __('admin.user_type') }}</label>
        <select name="user_type" class="admin-input" required x-model="userType">
            <option value="0">{{ __('admin.user_type_customer') }}</option>
            <option value="2">{{ __('admin.user_type_admin') }}</option>
        </select>
    </div>
    <div class="sm:col-span-2"><label class="admin-label">{{ __('admin.password') }}</label>
        <x-site.password-input name="password" class="admin-input" autocomplete="new-password" :required="! $u" />
        @if($u)<p class="mt-1 text-xs text-slate-500">خالی = بدون تغییر</p>@endif
    </div>
    <div class="sm:col-span-2" x-show="userType === '2'" x-cloak>
        <label class="admin-label">{{ __('admin.roles') }}</label>
        <div class="mt-2 flex flex-wrap gap-3">
            @foreach($roles as $role)
                <label class="flex items-center gap-2 text-sm">
                    <input type="checkbox" name="roles[]" value="{{ $role->name }}" @checked(in_array($role->name, old('roles', $u ? $u->roles->pluck('name')->all() : []))) class="rounded" />
                    {{ $role->name }}
                </label>
            @endforeach
        </div>
    </div>
</div>