<div class="max-w-lg mx-auto p-8 bg-white shadow-lg rounded-lg">
    <form wire:submit.prevent="submitForm">
        @csrf
        <div class="mb-6">
            <h2
                class="font-medium flex items-center tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base">
                <i aria-hidden="true" class="fa-solid fa-edit text-primary"></i> Create
            </h2>
        </div>

        <div class="space-y-2">
            <div class="mb-2">
                <label for="username" class="block text-sm font-medium text-gray-700">Username:</label>
                <input type="text" wire:model.defer="username" id="username"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('username')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="first_name" class="block text-sm font-medium text-gray-700">Firstname:</label>
                <input type="text" wire:model.defer="first_name" id="first_name"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('first_name')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="last_name" class="block text-sm font-medium text-gray-700">Lastname:</label>
                <input type="text" wire:model.defer="last_name" id="last_name"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('last_name')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="email" class="block text-sm font-medium text-gray-700">Email:</label>
                <input type="email" wire:model.email="email" id="email"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your email">
                @error('email')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="phone" class="block text-sm font-medium text-gray-700">Phone:</label>
                <input type="text" wire:model.defer="phone" id="phone"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your name">
                @error('phone')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>
            <div class="mb-2">
                <label for="password" class="block text-sm font-medium text-gray-700">Password:</label>
                <input type="password" wire:model.password="password" id="password"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Enter your password">
                @error('password')
                    <span class="text-red-500 text-md self-center ml-4">{{ $message }}</span>
                @enderror
            </div>

            <div class="mb-2">
                <label for="password_confirmation" class="block text-sm font-medium text-gray-700">Confirm
                    Password:</label>
                <input type="password" wire:model.defer="password_confirmation" id="password_confirmation"
                    class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-primary focus:border-primary sm:text-sm"
                    placeholder="Confirm your password">
                @error('password_confirmation')
                    <span class="text-red-500 text-xs">{{ $message }}</span>
                @enderror
            </div>

            <div wire:ignore class="mb-2">
                <label for="group" class="block text-sm font-medium text-gray-700">Add Groups:</label>
                <span class="relative flex  w-full">
                    <input class="mt-1.5  relative flex w-full" x-data="{ groupLists: @entangle('group_lists') }" x-init="groupLists = [];
                    const tempGroup = pages.groupSelect;
                    pages.fetchGroups(tempGroup).then(() => {
                        $el._x_tom = new Tom($el, {
                            ...tempGroup.group,
                            onChange: (value) => {
                                groupLists = value;
                            }
                        });
                    })"
                        type="text">
                </span>
            </div>

            <div class="flex justify-end space-x-4 mt-3">
                <button type="button" wire:click="goBack"
                    class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">Cancel</button>
                <button type="submit" type="submit"
                    class="px-4 py-2 bg-primary text-white rounded-md shadow-sm hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary">Save</button>
            </div>
        </div>
</div>
