<div>
    <!-- anchor tag horizontally -->
    <div class="flex items-center gap-2 text-xs text-gray-600">
        <!-- Home link -->
        <a href="/main/profile" class="flex items-center hover:text-orange-600">
            <x-heroicon-o-home class="w-3 h-3 mr-1" />
            <span class="leading-none">Home</span>
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <a href="/main/user-management" class="hover:text-orange-600">
            User Management
        </a>
        <x-heroicon-o-chevron-right class="w-3 h-3" />
        <span>
        Create User
        </span>    
    </div>

    <!-- Page Title -->
    <h3 class="text-5xl font-semibold text-gray-800 mt-4">Create User</h3>

    <!-- Bottom border -->
    <div class="border-b border-gray-300 mt-5"></div>

    <div class="p-6 mt-10 max-w-5xl mx-auto bg-white rounded-md shadow-md">
        <h2 class="text-lg font-semibold mb-4">User Details</h2>

        <div class="space-y-4">
            <!-- Username -->
            <div class="flex items-center gap-2">
                <label class="w-40">Username:</label>
                <input type="text" wire:model="username" class="flex-1 border rounded px-3 py-2" placeholder="User name">
                <button class="bg-orange-500 text-white px-3 py-1 rounded">Copy</button>
            </div>

            <!-- First Name -->
            <div class="flex items-center gap-2">
                <label class="w-40">First Name:</label>
                <input type="text" wire:model="first_name" class="flex-1 border rounded px-3 py-2" placeholder="First Name">
            </div>

            <!-- Last Name -->
            <div class="flex items-center gap-2">
                <label class="w-40">Last Name:</label>
                <input type="text" wire:model="last_name" class="flex-1 border rounded px-3 py-2" placeholder="Last Name">
            </div>

            <!-- Email -->
            <div class="flex items-center gap-2">
                <label class="w-40">Email Address:</label>
                <input type="email" wire:model="email" class="flex-1 border rounded px-3 py-2" placeholder="Email Address">
            </div>

            <!-- Status -->
            <div class="flex items-center gap-4">
                <label class="w-40">Status:</label>
                <label>
                    <input type="radio" wire:model="status" name="status" value="active" class="mr-1"> Active
                </label>
                <label>
                    <input type="radio" wire:model="status" name="status" value="inactive" class="mr-1"> Inactive
                </label>
            </div>

            <!-- Role -->
            <div class="flex items-center gap-4">
                <label class="w-40">User Role:</label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="admin" class="mr-1"> System Admin
                </label>
                <label>
                    <input type="radio" wire:model="role" name="role" value="marketing" class="mr-1"> Marketing Personnel
                </label>
            </div>

            <!-- Password -->
            <div class="flex items-center gap-2">
                <label class="w-40">Default Password:</label>
                <input type="text" wire:model="default_password" class="flex-1 border rounded px-3 py-2" placeholder="Default Password">
                <button wire:click="generatePassword" class="bg-orange-500 text-white px-3 py-1 rounded">Generate</button>
                <button class="bg-orange-500 text-white px-3 py-1 rounded">Copy</button>
            </div>
        </div>

        <!-- Submit / Cancel -->
        <div class="mt-6 flex justify-end gap-2">
            <button wire:click="cancel" class="px-4 py-2 bg-gray-300 text-black rounded hover:bg-gray-400">Cancel</button>
            <button wire:click="submit" class="px-4 py-2 bg-orange-500 text-white rounded hover:bg-orange-600">Submit</button>
        </div>
    </div>
</div>
