@if ($errors->any())
    <div class="rounded-lg border border-error/30 bg-error-container px-4 py-3 text-on-error-container font-body-sm">
        Revisa los campos marcados antes de continuar.
    </div>
@endif

<form class="bg-white rounded-xl border border-outline-variant p-8 shadow-[0px_4px_20px_rgba(0,0,0,0.04)] space-y-6"
    action="{{ $action }}" method="POST">
    @csrf
    @if ($method !== 'POST')
        @method($method)
    @endif

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="name">Nombre</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="name" name="name" type="text" value="{{ old('name', $user?->name) }}" required />
            @error('name') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="apellidos">Apellidos</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="apellidos" name="apellidos" type="text" value="{{ old('apellidos', $user?->apellidos) }}" required />
            @error('apellidos') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
    </div>

    <div>
        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="email">Correo</label>
        <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
            id="email" name="email" type="email" value="{{ old('email', $user?->email) }}" required />
        @error('email') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
    </div>

    <div>
        <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="role">Rol</label>
        <select class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
            id="role" name="role" required>
            <option value="">Selecciona un rol</option>
            @foreach ($roles as $role)
                <option value="{{ $role->name }}" @selected(old('role', $user?->roles->first()?->name) === $role->name)>
                    {{ $role->pretty_name ?? $role->name }}
                </option>
            @endforeach
        </select>
        @error('role') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="password">
                Contraseña {{ $user ? '(opcional)' : '' }}
            </label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="password" name="password" type="password" @required(! $user) />
            @error('password') <p class="mt-1 font-body-sm text-error">{{ $message }}</p> @enderror
        </div>
        <div>
            <label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider" for="password_confirmation">Confirmar contraseña</label>
            <input class="mt-2 w-full rounded-lg border-outline-variant py-3 focus:border-primary focus:ring-primary"
                id="password_confirmation" name="password_confirmation" type="password" @required(! $user) />
        </div>
    </div>

    <div class="rounded-lg bg-surface-container px-4 py-3 font-body-sm text-body-sm text-on-surface-variant">
        La contraseña debe tener mínimo 8 caracteres, una mayúscula, una minúscula y un carácter especial.
    </div>

    <div class="flex justify-end gap-3 border-t border-outline-variant pt-6">
        <a class="rounded-lg border border-outline-variant px-5 py-3 font-label-md text-label-md text-on-surface-variant"
            href="{{ route('admin.usuarios.index') }}">Cancelar</a>
        <button class="rounded-lg bg-primary px-5 py-3 font-label-md text-label-md text-on-primary" type="submit">
            Guardar usuario
        </button>
    </div>
</form>