@php($user = $user ?? null)

<div class="grid gap-5 sm:grid-cols-2">
    <div>
        <x-label for="name">Nombre completo *</x-label>
        <x-input id="name" type="text" name="name" value="{{ old('name', $user?->name) }}" required />
        <x-error for="name" />
    </div>

    <div>
        <x-label for="email">Correo electrónico *</x-label>
        <x-input id="email" type="email" name="email" value="{{ old('email', $user?->email) }}" required />
        <x-error for="email" />
    </div>

    <div>
        <x-label for="password">{{ $user ? 'Nueva contraseña (vacío = mantener actual)' : 'Contraseña *' }}</x-label>
        <x-input id="password" type="password" name="password" autocomplete="new-password" :required="!$user" />
        <x-error for="password" />
    </div>

    <div>
        <x-label for="password_confirmation">Confirmar contraseña</x-label>
        <x-input id="password_confirmation" type="password" name="password_confirmation" autocomplete="new-password" :required="!$user" />
    </div>

    <div>
        <x-label for="role">Rol *</x-label>
        <x-select id="role" name="role" required>
            <option value="">Selecciona un rol</option>
            @foreach ($roles as $role)
                <option value="{{ $role->name }}" @selected(old('role', $user?->getRoleNames()->first()) === $role->name)>
                    {{ ucfirst($role->name) }}
                </option>
            @endforeach
        </x-select>
        <x-error for="role" />
    </div>

    <div>
        <x-label for="is_active">Estado *</x-label>
        <x-select id="is_active" name="is_active" required>
            <option value="1" @selected(old('is_active', $user?->is_active ?? true))>Activo</option>
            <option value="0" @selected(!old('is_active', $user?->is_active ?? true))>Inactivo</option>
        </x-select>
        <x-error for="is_active" />
    </div>
</div>

<div class="mt-8 flex items-center justify-end gap-3">
    <a href="{{ route('users.index') }}">
        <x-button type="button" variant="secondary">Cancelar</x-button>
    </a>
    <x-button type="submit"><i class="fa-solid fa-floppy-disk"></i> Guardar</x-button>
</div>