@php
    $isEdit = isset($adminUser);
@endphp

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div>
        <x-input-label for="name" :value="__('messages.name')" />
        <x-text-input id="name" name="name" type="text" class="mt-1 block w-full" :value="old('name', $adminUser->name ?? '')" required />
        <x-input-error class="mt-2" :messages="$errors->get('name')" />
    </div>

    <div>
        <x-input-label for="username" :value="__('messages.username')" />
        <x-text-input id="username" name="username" type="text" class="mt-1 block w-full" :value="old('username', $adminUser->username ?? '')" required />
        <x-input-error class="mt-2" :messages="$errors->get('username')" />
    </div>

    <div>
        <x-input-label for="email" :value="__('messages.email')" />
        <x-text-input id="email" name="email" type="email" class="mt-1 block w-full" :value="old('email', $adminUser->email ?? '')" placeholder="mohammad.idr1998@gmail.com" />
        <x-input-error class="mt-2" :messages="$errors->get('email')" />
    </div>

    <div>
        <x-input-label for="phone" :value="__('messages.phone')" />
        <x-text-input id="phone" name="phone" type="text" class="mt-1 block w-full" :value="old('phone', $adminUser->phone ?? '')" />
        <x-input-error class="mt-2" :messages="$errors->get('phone')" />
    </div>

    <div>
        <x-input-label for="password" :value="__('messages.password')" />
        <x-text-input id="password" name="password" type="password" class="mt-1 block w-full" :required="!$isEdit" />
        <x-input-error class="mt-2" :messages="$errors->get('password')" />
    </div>

    <div>
        <x-input-label for="password_confirmation" :value="__('messages.password_confirmation')" />
        <x-text-input id="password_confirmation" name="password_confirmation" type="password" class="mt-1 block w-full" :required="!$isEdit" />
    </div>

    <div class="md:col-span-2">
        <x-input-label :value="__('messages.roles')" />
        <div class="mt-2 flex flex-wrap gap-2">
            @foreach ($roles as $role)
                <label class="inline-flex items-center px-3 py-2 rounded-lg border border-[var(--theme-border)] text-sm">
                    <input type="checkbox" name="roles[]" value="{{ $role->name }}" class="rounded border-[var(--theme-border)]"
                        @checked(in_array($role->name, old('roles', $selectedRoles ?? []), true))>
                    <span class="ms-2">{{ $role->name }}</span>
                </label>
            @endforeach
        </div>
        <x-input-error class="mt-2" :messages="$errors->get('roles')" />
        <x-input-error class="mt-2" :messages="$errors->get('roles.*')" />
    </div>

    <div class="md:col-span-2">
        <label class="inline-flex items-center">
            <input type="checkbox" name="is_active" value="1" class="rounded border-[var(--theme-border)]"
                @checked(old('is_active', $adminUser->is_active ?? true))>
            <span class="ms-2 text-sm">{{ __('messages.active_account') }}</span>
        </label>
    </div>
</div>

<div class="mt-6 flex items-center gap-3">
    <x-primary-button>{{ $isEdit ? __('messages.update') : __('messages.create') }}</x-primary-button>
    <a href="{{ route('admin.admin-users.index') }}" class="px-4 py-2 rounded-lg border border-[var(--theme-border)] text-sm">
        {{ __('messages.cancel') }}
    </a>
</div>