npm - @syndew/oluso-plugin-saml - Versions diffs - 0.0.0-stage → 1.30.1 - Mend

@syndew/oluso-plugin-saml 0.0.0-stage → 1.30.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/LICENSE +76 -0
package/README.md +36 -2
package/fesm2022/syndew-oluso-plugin-saml.mjs +3249 -0
package/fesm2022/syndew-oluso-plugin-saml.mjs.map +1 -0
package/package.json +49 -3
package/types/syndew-oluso-plugin-saml.d.ts +404 -0

package/fesm2022/syndew-oluso-plugin-saml.mjs ADDED Viewed

@@ -0,0 +1,3249 @@
+import * as i0 from '@angular/core';
+import { inject, Injectable, signal, Component } from '@angular/core';
+import { ApiService } from '@syndew/oluso-admin-ui';
+import { CommonModule } from '@angular/common';
+import { RouterLink, ActivatedRoute, Router } from '@angular/router';
+import { ButtonComponent, IconComponent, ModalComponent, TAB_CONTEXT } from '@syndew/oluso-ui-core';
+import { forkJoin, Subject, debounceTime, distinctUntilChanged, catchError, of } from 'rxjs';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+/**
+ * Name ID format options
+ */
+const NAME_ID_FORMATS = [
+    { value: '', label: 'Default (emailAddress)' },
+    { value: 'urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress', label: 'Email Address' },
+    { value: 'urn:oasis:names:tc:SAML:2.0:nameid-format:persistent', label: 'Persistent' },
+    { value: 'urn:oasis:names:tc:SAML:2.0:nameid-format:transient', label: 'Transient' },
+    { value: 'urn:oasis:names:tc:SAML:1.1:nameid-format:unspecified', label: 'Unspecified' },
+];
+/**
+ * SSO Binding options
+ */
+const SSO_BINDINGS = [
+    { value: 'POST', label: 'HTTP-POST' },
+    { value: 'Redirect', label: 'HTTP-Redirect' },
+];
+/**
+ * SAML Service
+ *
+ * Provides HTTP methods for managing SAML Service Providers and IdP configuration.
+ */
+class SamlService {
+    api = inject(ApiService);
+    basePath = '/saml/service-providers';
+    /**
+     * Get IdP info
+     */
+    getIdpInfo() {
+        return this.api.get(`${this.basePath}/idp-info`);
+    }
+    /**
+     * Check if an entity ID is available
+     */
+    checkEntityIdAvailability(entityId, excludeId) {
+        const params = {};
+        if (excludeId) {
+            params['excludeId'] = excludeId;
+        }
+        return this.api.get(`${this.basePath}/check-entity-id/${encodeURIComponent(entityId)}`, params);
+    }
+    /**
+     * Get all service providers
+     */
+    getAll(includeDisabled = false) {
+        return this.api.get(this.basePath, { includeDisabled });
+    }
+    /**
+     * Get a service provider by ID
+     */
+    getById(id) {
+        return this.api.get(`${this.basePath}/${id}`);
+    }
+    /**
+     * Get a service provider for editing (includes certificates)
+     */
+    getForEdit(id) {
+        return this.api.get(`${this.basePath}/${id}/edit`);
+    }
+    /**
+     * Create a new service provider
+     */
+    create(data) {
+        return this.api.post(this.basePath, data);
+    }
+    /**
+     * Update a service provider
+     */
+    update(id, data) {
+        return this.api.put(`${this.basePath}/${id}`, data);
+    }
+    /**
+     * Delete a service provider
+     */
+    delete(id) {
+        return this.api.delete(`${this.basePath}/${id}`);
+    }
+    /**
+     * Toggle a service provider's enabled status
+     */
+    toggle(id) {
+        return this.api.post(`${this.basePath}/${id}/toggle`, {});
+    }
+    /**
+     * Test a service provider configuration
+     */
+    test(id) {
+        return this.api.post(`${this.basePath}/${id}/test`, {});
+    }
+    // SAML IdP Configuration
+    /**
+     * Get IdP configuration
+     */
+    getIdpConfiguration() {
+        return this.api.get(`${this.basePath}/idp-configuration`);
+    }
+    /**
+     * Update IdP configuration
+     */
+    updateIdpConfiguration(data) {
+        return this.api.put(`${this.basePath}/idp-configuration`, data);
+    }
+    // IdP Certificate Management
+    /**
+     * Get signing certificate info
+     */
+    getSigningCertificate() {
+        return this.api.get(`${this.basePath}/idp-certificate/signing`);
+    }
+    /**
+     * Get encryption certificate info
+     */
+    getEncryptionCertificate() {
+        return this.api.get(`${this.basePath}/idp-certificate/encryption`);
+    }
+    /**
+     * Generate a new signing certificate
+     */
+    generateSigningCertificate() {
+        return this.api.post(`${this.basePath}/idp-certificate/signing/generate`, {});
+    }
+    /**
+     * Generate a new encryption certificate
+     */
+    generateEncryptionCertificate() {
+        return this.api.post(`${this.basePath}/idp-certificate/encryption/generate`, {});
+    }
+    /**
+     * Upload a signing certificate
+     */
+    uploadSigningCertificate(data) {
+        return this.api.post(`${this.basePath}/idp-certificate/signing/upload`, data);
+    }
+    /**
+     * Upload an encryption certificate
+     */
+    uploadEncryptionCertificate(data) {
+        return this.api.post(`${this.basePath}/idp-certificate/encryption/upload`, data);
+    }
+    /**
+     * Reset signing certificate to global
+     */
+    resetSigningCertificate() {
+        return this.api.post(`${this.basePath}/idp-certificate/signing/reset`, {});
+    }
+    /**
+     * Reset encryption certificate to global
+     */
+    resetEncryptionCertificate() {
+        return this.api.post(`${this.basePath}/idp-certificate/encryption/reset`, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+class SamlDashboardComponent {
+    samlService = inject(SamlService);
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    idpInfo = signal(null, ...(ngDevMode ? [{ debugName: "idpInfo" }] : /* istanbul ignore next */ []));
+    serviceProviders = signal([], ...(ngDevMode ? [{ debugName: "serviceProviders" }] : /* istanbul ignore next */ []));
+    copied = signal(null, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    enabledCount = () => this.serviceProviders().filter((sp) => sp.enabled).length;
+    disabledCount = () => this.serviceProviders().length - this.enabledCount();
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.loading.set(true);
+        forkJoin({
+            idpInfo: this.samlService.getIdpInfo(),
+            serviceProviders: this.samlService.getAll(),
+        }).subscribe({
+            next: (data) => {
+                this.idpInfo.set(data.idpInfo);
+                this.serviceProviders.set(data.serviceProviders);
+                this.error.set(null);
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error loading SAML data:', err);
+                this.error.set('Failed to load SAML configuration');
+                this.loading.set(false);
+            },
+        });
+    }
+    copyToClipboard(value, label) {
+        navigator.clipboard.writeText(value).then(() => {
+            this.copied.set(label);
+            setTimeout(() => this.copied.set(null), 2000);
+        });
+    }
+    getFormatName(format) {
+        return format.split(':').pop() || format;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SamlDashboardComponent, isStandalone: true, selector: "saml-dashboard", ngImport: i0, template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h1 class="text-2xl font-bold text-gray-900">SAML Identity Provider</h1>
+        <a routerLink="/saml/service-providers">
+          <ui-button>Manage Service Providers</ui-button>
+        </a>
+      </div>
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            @for (i of [1, 2]; track i) {
+              <div class="h-48 bg-gray-200 rounded-lg animate-pulse"></div>
+            }
+          </div>
+        </div>
+      } @else if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      } @else {
+        <!-- IdP Status -->
+        <div [class]="idpInfo()?.enabled ? 'bg-green-50 border border-green-200' : 'bg-yellow-50 border border-yellow-200'" class="rounded-lg p-4">
+          <div class="flex items-center space-x-2">
+            @if (idpInfo()?.enabled) {
+              <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+              <span class="text-green-700 font-medium">SAML IdP is enabled</span>
+            } @else {
+              <ui-icon name="x-circle" class="h-5 w-5 text-yellow-600" />
+              <span class="text-yellow-700 font-medium">SAML IdP is disabled</span>
+            }
+          </div>
+        </div>
+        <!-- IdP Configuration Info -->
+        @if (idpInfo()) {
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">IdP Configuration</h2>
+              <p class="mt-1 text-sm text-gray-500">Share these URLs with Service Providers to configure SSO</p>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Entity ID (Issuer):</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <code class="text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded truncate">{{ idpInfo()?.entityId }}</code>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.entityId || '', 'entityId')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'entityId') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO URL:</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <code class="text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded truncate">{{ idpInfo()?.singleSignOnServiceUrl }}</code>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleSignOnServiceUrl || '', 'ssoUrl')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'ssoUrl') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata URL:</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <a [href]="idpInfo()?.metadataUrl" target="_blank" rel="noopener noreferrer" class="text-sm text-primary-600 hover:text-primary-700 truncate">
+                      {{ idpInfo()?.metadataUrl }}
+                    </a>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.metadataUrl || '', 'metadataUrl')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'metadataUrl') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="pt-2">
+                <span class="text-sm font-medium text-gray-500">Supported Name ID Formats:</span>
+                <ul class="mt-1 text-sm text-gray-700 list-disc list-inside">
+                  @for (format of idpInfo()?.supportedNameIdFormats || []; track format) {
+                    <li>{{ getFormatName(format) }}</li>
+                  }
+                </ul>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- Service Provider Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <a routerLink="/saml/service-providers" class="bg-white shadow rounded-lg p-6 hover:shadow-md transition-shadow">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="building" class="h-8 w-8 text-gray-400" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Total Service Providers</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ serviceProviders().length }}</p>
+              </div>
+            </div>
+          </a>
+          <div class="bg-white shadow rounded-lg p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="check-circle" class="h-8 w-8 text-green-500" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Enabled</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ enabledCount() }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white shadow rounded-lg p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="x-circle" class="h-8 w-8 text-gray-400" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Disabled</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ disabledCount() }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Recent Service Providers -->
+        @if (serviceProviders().length > 0) {
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Service Providers</h2>
+            </div>
+            <ul class="divide-y divide-gray-200">
+              @for (sp of serviceProviders().slice(0, 5); track sp.id) {
+                <li class="px-6 py-4 hover:bg-gray-50">
+                  <a [routerLink]="['/saml/service-providers', sp.id]" class="flex items-center justify-between">
+                    <div class="flex items-center space-x-3">
+                      <ui-icon name="building" class="h-6 w-6 text-gray-400" />
+                      <div>
+                        <p class="font-medium text-gray-900">{{ sp.displayName || sp.entityId }}</p>
+                        <p class="text-sm text-gray-500 truncate max-w-md">{{ sp.entityId }}</p>
+                      </div>
+                    </div>
+                    <span [class]="sp.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
+                      {{ sp.enabled ? 'Enabled' : 'Disabled' }}
+                    </span>
+                  </a>
+                </li>
+              }
+            </ul>
+            @if (serviceProviders().length > 5) {
+              <div class="px-6 py-3 border-t border-gray-200 bg-gray-50">
+                <a routerLink="/saml/service-providers" class="text-sm text-primary-600 hover:text-primary-700">
+                  View all {{ serviceProviders().length }} service providers
+                </a>
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="text-center py-12 bg-white rounded-lg shadow">
+            <ui-icon name="building" class="mx-auto h-12 w-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No Service Providers</h3>
+            <p class="mt-1 text-sm text-gray-500">Get started by adding a SAML Service Provider.</p>
+            <div class="mt-6">
+              <a routerLink="/saml/service-providers/new">
+                <ui-button>Add Service Provider</ui-button>
+              </a>
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlDashboardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'saml-dashboard',
+                    standalone: true,
+                    imports: [CommonModule, RouterLink, ButtonComponent, IconComponent],
+                    template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <h1 class="text-2xl font-bold text-gray-900">SAML Identity Provider</h1>
+        <a routerLink="/saml/service-providers">
+          <ui-button>Manage Service Providers</ui-button>
+        </a>
+      </div>
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+            @for (i of [1, 2]; track i) {
+              <div class="h-48 bg-gray-200 rounded-lg animate-pulse"></div>
+            }
+          </div>
+        </div>
+      } @else if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      } @else {
+        <!-- IdP Status -->
+        <div [class]="idpInfo()?.enabled ? 'bg-green-50 border border-green-200' : 'bg-yellow-50 border border-yellow-200'" class="rounded-lg p-4">
+          <div class="flex items-center space-x-2">
+            @if (idpInfo()?.enabled) {
+              <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+              <span class="text-green-700 font-medium">SAML IdP is enabled</span>
+            } @else {
+              <ui-icon name="x-circle" class="h-5 w-5 text-yellow-600" />
+              <span class="text-yellow-700 font-medium">SAML IdP is disabled</span>
+            }
+          </div>
+        </div>
+        <!-- IdP Configuration Info -->
+        @if (idpInfo()) {
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">IdP Configuration</h2>
+              <p class="mt-1 text-sm text-gray-500">Share these URLs with Service Providers to configure SSO</p>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Entity ID (Issuer):</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <code class="text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded truncate">{{ idpInfo()?.entityId }}</code>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.entityId || '', 'entityId')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'entityId') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO URL:</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <code class="text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded truncate">{{ idpInfo()?.singleSignOnServiceUrl }}</code>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleSignOnServiceUrl || '', 'ssoUrl')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'ssoUrl') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata URL:</span>
+                  <div class="flex items-center space-x-2 mt-1">
+                    <a [href]="idpInfo()?.metadataUrl" target="_blank" rel="noopener noreferrer" class="text-sm text-primary-600 hover:text-primary-700 truncate">
+                      {{ idpInfo()?.metadataUrl }}
+                    </a>
+                  </div>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.metadataUrl || '', 'metadataUrl')" class="ml-4 p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+                  @if (copied() === 'metadataUrl') {
+                    <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+                  } @else {
+                    <ui-icon name="clipboard-document" class="h-5 w-5" />
+                  }
+                </button>
+              </div>
+              <div class="pt-2">
+                <span class="text-sm font-medium text-gray-500">Supported Name ID Formats:</span>
+                <ul class="mt-1 text-sm text-gray-700 list-disc list-inside">
+                  @for (format of idpInfo()?.supportedNameIdFormats || []; track format) {
+                    <li>{{ getFormatName(format) }}</li>
+                  }
+                </ul>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- Service Provider Stats -->
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <a routerLink="/saml/service-providers" class="bg-white shadow rounded-lg p-6 hover:shadow-md transition-shadow">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="building" class="h-8 w-8 text-gray-400" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Total Service Providers</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ serviceProviders().length }}</p>
+              </div>
+            </div>
+          </a>
+          <div class="bg-white shadow rounded-lg p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="check-circle" class="h-8 w-8 text-green-500" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Enabled</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ enabledCount() }}</p>
+              </div>
+            </div>
+          </div>
+          <div class="bg-white shadow rounded-lg p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <ui-icon name="x-circle" class="h-8 w-8 text-gray-400" />
+              </div>
+              <div class="ml-4">
+                <p class="text-sm font-medium text-gray-500">Disabled</p>
+                <p class="text-2xl font-semibold text-gray-900">{{ disabledCount() }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- Recent Service Providers -->
+        @if (serviceProviders().length > 0) {
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Service Providers</h2>
+            </div>
+            <ul class="divide-y divide-gray-200">
+              @for (sp of serviceProviders().slice(0, 5); track sp.id) {
+                <li class="px-6 py-4 hover:bg-gray-50">
+                  <a [routerLink]="['/saml/service-providers', sp.id]" class="flex items-center justify-between">
+                    <div class="flex items-center space-x-3">
+                      <ui-icon name="building" class="h-6 w-6 text-gray-400" />
+                      <div>
+                        <p class="font-medium text-gray-900">{{ sp.displayName || sp.entityId }}</p>
+                        <p class="text-sm text-gray-500 truncate max-w-md">{{ sp.entityId }}</p>
+                      </div>
+                    </div>
+                    <span [class]="sp.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
+                      {{ sp.enabled ? 'Enabled' : 'Disabled' }}
+                    </span>
+                  </a>
+                </li>
+              }
+            </ul>
+            @if (serviceProviders().length > 5) {
+              <div class="px-6 py-3 border-t border-gray-200 bg-gray-50">
+                <a routerLink="/saml/service-providers" class="text-sm text-primary-600 hover:text-primary-700">
+                  View all {{ serviceProviders().length }} service providers
+                </a>
+              </div>
+            }
+          </div>
+        } @else {
+          <div class="text-center py-12 bg-white rounded-lg shadow">
+            <ui-icon name="building" class="mx-auto h-12 w-12 text-gray-400" />
+            <h3 class="mt-2 text-sm font-medium text-gray-900">No Service Providers</h3>
+            <p class="mt-1 text-sm text-gray-500">Get started by adding a SAML Service Provider.</p>
+            <div class="mt-6">
+              <a routerLink="/saml/service-providers/new">
+                <ui-button>Add Service Provider</ui-button>
+              </a>
+            </div>
+          </div>
+        }
+      }
+    </div>
+  `,
+                }]
+        }] });
+class ServiceProvidersPageComponent {
+    samlService = inject(SamlService);
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    serviceProviders = signal([], ...(ngDevMode ? [{ debugName: "serviceProviders" }] : /* istanbul ignore next */ []));
+    actionLoading = signal(null, ...(ngDevMode ? [{ debugName: "actionLoading" }] : /* istanbul ignore next */ []));
+    testResult = signal(null, ...(ngDevMode ? [{ debugName: "testResult" }] : /* istanbul ignore next */ []));
+    showDeleteModal = signal(false, ...(ngDevMode ? [{ debugName: "showDeleteModal" }] : /* istanbul ignore next */ []));
+    deleteTarget = signal(null, ...(ngDevMode ? [{ debugName: "deleteTarget" }] : /* istanbul ignore next */ []));
+    search = '';
+    showDisabled = true;
+    filteredProviders = () => {
+        if (!this.search)
+            return this.serviceProviders();
+        const searchLower = this.search.toLowerCase();
+        return this.serviceProviders().filter((sp) => sp.entityId.toLowerCase().includes(searchLower) ||
+            sp.displayName?.toLowerCase().includes(searchLower) ||
+            sp.description?.toLowerCase().includes(searchLower));
+    };
+    ngOnInit() {
+        this.loadServiceProviders();
+    }
+    loadServiceProviders() {
+        this.loading.set(true);
+        this.samlService.getAll(this.showDisabled).subscribe({
+            next: (data) => {
+                this.serviceProviders.set(data);
+                this.error.set(null);
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error loading service providers:', err);
+                this.error.set('Failed to load Service Providers');
+                this.loading.set(false);
+            },
+        });
+    }
+    onSearchChange() {
+        // Filtering is handled reactively
+    }
+    handleToggle(sp) {
+        this.actionLoading.set(sp.id);
+        this.samlService.toggle(sp.id).subscribe({
+            next: () => {
+                this.loadServiceProviders();
+                this.actionLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error toggling service provider:', err);
+                this.actionLoading.set(null);
+            },
+        });
+    }
+    confirmDelete(sp) {
+        this.deleteTarget.set(sp);
+        this.showDeleteModal.set(true);
+    }
+    handleDelete() {
+        const sp = this.deleteTarget();
+        if (!sp)
+            return;
+        this.actionLoading.set(sp.id);
+        this.samlService.delete(sp.id).subscribe({
+            next: () => {
+                this.showDeleteModal.set(false);
+                this.deleteTarget.set(null);
+                this.loadServiceProviders();
+                this.actionLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error deleting service provider:', err);
+                this.actionLoading.set(null);
+            },
+        });
+    }
+    handleTest(sp) {
+        this.actionLoading.set(sp.id);
+        this.testResult.set(null);
+        this.samlService.test(sp.id).subscribe({
+            next: (result) => {
+                this.testResult.set(result);
+                this.actionLoading.set(null);
+            },
+            error: () => {
+                this.testResult.set({ success: false, message: 'Failed to run test' });
+                this.actionLoading.set(null);
+            },
+        });
+    }
+    formatDate(dateStr) {
+        return new Date(dateStr).toLocaleDateString();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ServiceProvidersPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ServiceProvidersPageComponent, isStandalone: true, selector: "saml-service-providers-page", ngImport: i0, template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900">SAML Service Providers</h1>
+          <p class="mt-1 text-sm text-gray-500">Applications that use this system as their SAML Identity Provider</p>
+        </div>
+        <a routerLink="/saml/service-providers/new">
+          <ui-button>
+            <ui-icon name="plus" class="-ml-1 mr-2 h-5 w-5" />
+            Add Service Provider
+          </ui-button>
+        </a>
+      </div>
+      <!-- Filters -->
+      <div class="flex items-center space-x-4">
+        <div class="flex-1 max-w-md">
+          <div class="relative">
+            <ui-icon name="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+            <input
+              type="text"
+              [(ngModel)]="search"
+              (ngModelChange)="onSearchChange()"
+              placeholder="Search by Entity ID, name, or description..."
+              class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
+            />
+          </div>
+        </div>
+        <label class="flex items-center space-x-2 text-sm text-gray-700">
+          <input
+            type="checkbox"
+            [(ngModel)]="showDisabled"
+            (ngModelChange)="loadServiceProviders()"
+            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+          />
+          <span>Show disabled</span>
+        </label>
+      </div>
+      @if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      }
+      <!-- Test Result Toast -->
+      @if (testResult()) {
+        <div [class]="testResult()?.success ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'" class="rounded-lg p-4 border">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+              @if (testResult()?.success) {
+                <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+              } @else {
+                <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+              }
+              <span [class]="testResult()?.success ? 'text-green-700' : 'text-red-700'">{{ testResult()?.message }}</span>
+            </div>
+            <button (click)="testResult.set(null)" class="text-gray-400 hover:text-gray-600">&times;</button>
+          </div>
+        </div>
+      }
+      @if (loading()) {
+        <div class="space-y-4">
+          @for (i of [1, 2, 3]; track i) {
+            <div class="bg-gray-200 h-24 rounded-lg animate-pulse"></div>
+          }
+        </div>
+      } @else if (filteredProviders().length === 0) {
+        <div class="text-center py-12 bg-white rounded-lg shadow">
+          <ui-icon name="building" class="mx-auto h-12 w-12 text-gray-400" />
+          <h3 class="mt-2 text-sm font-medium text-gray-900">No Service Providers</h3>
+          <p class="mt-1 text-sm text-gray-500">
+            {{ search ? 'No service providers match your search.' : 'Get started by adding a SAML Service Provider.' }}
+          </p>
+          @if (!search) {
+            <div class="mt-6">
+              <a routerLink="/saml/service-providers/new">
+                <ui-button>Add Service Provider</ui-button>
+              </a>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="bg-white shadow overflow-hidden rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Provider</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Configuration</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Accessed</th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              @for (sp of filteredProviders(); track sp.id) {
+                <tr class="hover:bg-gray-50">
+                  <td class="px-6 py-4">
+                    <div class="flex items-center">
+                      <ui-icon name="building" class="h-8 w-8 text-gray-400 flex-shrink-0" />
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">{{ sp.displayName || sp.entityId }}</div>
+                        <div class="text-sm text-gray-500 max-w-xs truncate" [title]="sp.entityId">{{ sp.entityId }}</div>
+                        @if (sp.description) {
+                          <div class="text-xs text-gray-400 max-w-xs truncate">{{ sp.description }}</div>
+                        }
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span [class]="sp.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
+                      {{ sp.enabled ? 'Enabled' : 'Disabled' }}
+                    </span>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="flex items-center space-x-2 text-xs text-gray-500">
+                      @if (sp.metadataUrl) {
+                        <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Metadata</span>
+                      } @else {
+                        <span class="bg-gray-100 text-gray-600 px-2 py-0.5 rounded">Manual</span>
+                      }
+                      @if (sp.encryptAssertions) {
+                        <span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded">Encrypted</span>
+                      }
+                      @if (sp.requireSignedAuthnRequests) {
+                        <span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded">Signed Requests</span>
+                      }
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {{ sp.lastAccessed ? formatDate(sp.lastAccessed) : 'Never' }}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex items-center justify-end space-x-2">
+                      <button (click)="handleTest(sp)" [disabled]="actionLoading() === sp.id" class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded" title="Test configuration">
+                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                        </svg>
+                      </button>
+                      <button (click)="handleToggle(sp)" [disabled]="actionLoading() === sp.id || sp.nonEditable" [class]="sp.enabled ? 'text-gray-400 hover:text-yellow-600 hover:bg-yellow-50' : 'text-gray-400 hover:text-green-600 hover:bg-green-50'" class="p-1.5 rounded" [class.opacity-50]="sp.nonEditable" [class.cursor-not-allowed]="sp.nonEditable" [title]="sp.enabled ? 'Disable' : 'Enable'">
+                        @if (sp.enabled) {
+                          <ui-icon name="pause-circle" class="h-4 w-4" />
+                        } @else {
+                          <ui-icon name="play-circle" class="h-4 w-4" />
+                        }
+                      </button>
+                      <a [routerLink]="['/saml/service-providers', sp.id]" class="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded" title="Edit">
+                        <ui-icon name="pencil" class="h-4 w-4" />
+                      </a>
+                      <button (click)="confirmDelete(sp)" [disabled]="actionLoading() === sp.id || sp.nonEditable" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded" [class.opacity-50]="sp.nonEditable" [class.cursor-not-allowed]="sp.nonEditable" title="Delete">
+                        <ui-icon name="trash" class="h-4 w-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+      <!-- Delete Confirmation Modal -->
+      <ui-modal [open]="showDeleteModal()" title="Delete Service Provider" (closed)="showDeleteModal.set(false)">
+        <p class="text-sm text-gray-500">
+          Are you sure you want to delete "{{ deleteTarget()?.displayName || deleteTarget()?.entityId }}"?
+          This action cannot be undone.
+        </p>
+        <div class="mt-4 flex justify-end gap-3">
+          <ui-button variant="secondary" (clicked)="showDeleteModal.set(false)">Cancel</ui-button>
+          <ui-button variant="danger" [disabled]="!!actionLoading()" (clicked)="handleDelete()">
+            {{ actionLoading() ? 'Deleting...' : 'Delete' }}
+          </ui-button>
+        </div>
+      </ui-modal>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }, { kind: "component", type: ModalComponent, selector: "ui-modal", inputs: ["open", "title", "size", "showCloseButton", "closeOnBackdrop", "closeOnEscape", "scrollable"], outputs: ["closed"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ServiceProvidersPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'saml-service-providers-page',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, RouterLink, ButtonComponent, IconComponent, ModalComponent],
+                    template: `
+    <div class="space-y-6">
+      <div class="flex items-center justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900">SAML Service Providers</h1>
+          <p class="mt-1 text-sm text-gray-500">Applications that use this system as their SAML Identity Provider</p>
+        </div>
+        <a routerLink="/saml/service-providers/new">
+          <ui-button>
+            <ui-icon name="plus" class="-ml-1 mr-2 h-5 w-5" />
+            Add Service Provider
+          </ui-button>
+        </a>
+      </div>
+      <!-- Filters -->
+      <div class="flex items-center space-x-4">
+        <div class="flex-1 max-w-md">
+          <div class="relative">
+            <ui-icon name="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+            <input
+              type="text"
+              [(ngModel)]="search"
+              (ngModelChange)="onSearchChange()"
+              placeholder="Search by Entity ID, name, or description..."
+              class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-primary-500 focus:border-primary-500"
+            />
+          </div>
+        </div>
+        <label class="flex items-center space-x-2 text-sm text-gray-700">
+          <input
+            type="checkbox"
+            [(ngModel)]="showDisabled"
+            (ngModelChange)="loadServiceProviders()"
+            class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+          />
+          <span>Show disabled</span>
+        </label>
+      </div>
+      @if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      }
+      <!-- Test Result Toast -->
+      @if (testResult()) {
+        <div [class]="testResult()?.success ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'" class="rounded-lg p-4 border">
+          <div class="flex items-center justify-between">
+            <div class="flex items-center space-x-2">
+              @if (testResult()?.success) {
+                <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+              } @else {
+                <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+              }
+              <span [class]="testResult()?.success ? 'text-green-700' : 'text-red-700'">{{ testResult()?.message }}</span>
+            </div>
+            <button (click)="testResult.set(null)" class="text-gray-400 hover:text-gray-600">&times;</button>
+          </div>
+        </div>
+      }
+      @if (loading()) {
+        <div class="space-y-4">
+          @for (i of [1, 2, 3]; track i) {
+            <div class="bg-gray-200 h-24 rounded-lg animate-pulse"></div>
+          }
+        </div>
+      } @else if (filteredProviders().length === 0) {
+        <div class="text-center py-12 bg-white rounded-lg shadow">
+          <ui-icon name="building" class="mx-auto h-12 w-12 text-gray-400" />
+          <h3 class="mt-2 text-sm font-medium text-gray-900">No Service Providers</h3>
+          <p class="mt-1 text-sm text-gray-500">
+            {{ search ? 'No service providers match your search.' : 'Get started by adding a SAML Service Provider.' }}
+          </p>
+          @if (!search) {
+            <div class="mt-6">
+              <a routerLink="/saml/service-providers/new">
+                <ui-button>Add Service Provider</ui-button>
+              </a>
+            </div>
+          }
+        </div>
+      } @else {
+        <div class="bg-white shadow overflow-hidden rounded-lg">
+          <table class="min-w-full divide-y divide-gray-200">
+            <thead class="bg-gray-50">
+              <tr>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Provider</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Configuration</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Last Accessed</th>
+                <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="bg-white divide-y divide-gray-200">
+              @for (sp of filteredProviders(); track sp.id) {
+                <tr class="hover:bg-gray-50">
+                  <td class="px-6 py-4">
+                    <div class="flex items-center">
+                      <ui-icon name="building" class="h-8 w-8 text-gray-400 flex-shrink-0" />
+                      <div class="ml-4">
+                        <div class="text-sm font-medium text-gray-900">{{ sp.displayName || sp.entityId }}</div>
+                        <div class="text-sm text-gray-500 max-w-xs truncate" [title]="sp.entityId">{{ sp.entityId }}</div>
+                        @if (sp.description) {
+                          <div class="text-xs text-gray-400 max-w-xs truncate">{{ sp.description }}</div>
+                        }
+                      </div>
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap">
+                    <span [class]="sp.enabled ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'" class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium">
+                      {{ sp.enabled ? 'Enabled' : 'Disabled' }}
+                    </span>
+                  </td>
+                  <td class="px-6 py-4">
+                    <div class="flex items-center space-x-2 text-xs text-gray-500">
+                      @if (sp.metadataUrl) {
+                        <span class="bg-blue-100 text-blue-800 px-2 py-0.5 rounded">Metadata</span>
+                      } @else {
+                        <span class="bg-gray-100 text-gray-600 px-2 py-0.5 rounded">Manual</span>
+                      }
+                      @if (sp.encryptAssertions) {
+                        <span class="bg-purple-100 text-purple-800 px-2 py-0.5 rounded">Encrypted</span>
+                      }
+                      @if (sp.requireSignedAuthnRequests) {
+                        <span class="bg-yellow-100 text-yellow-800 px-2 py-0.5 rounded">Signed Requests</span>
+                      }
+                    </div>
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                    {{ sp.lastAccessed ? formatDate(sp.lastAccessed) : 'Never' }}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                    <div class="flex items-center justify-end space-x-2">
+                      <button (click)="handleTest(sp)" [disabled]="actionLoading() === sp.id" class="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded" title="Test configuration">
+                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
+                        </svg>
+                      </button>
+                      <button (click)="handleToggle(sp)" [disabled]="actionLoading() === sp.id || sp.nonEditable" [class]="sp.enabled ? 'text-gray-400 hover:text-yellow-600 hover:bg-yellow-50' : 'text-gray-400 hover:text-green-600 hover:bg-green-50'" class="p-1.5 rounded" [class.opacity-50]="sp.nonEditable" [class.cursor-not-allowed]="sp.nonEditable" [title]="sp.enabled ? 'Disable' : 'Enable'">
+                        @if (sp.enabled) {
+                          <ui-icon name="pause-circle" class="h-4 w-4" />
+                        } @else {
+                          <ui-icon name="play-circle" class="h-4 w-4" />
+                        }
+                      </button>
+                      <a [routerLink]="['/saml/service-providers', sp.id]" class="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded" title="Edit">
+                        <ui-icon name="pencil" class="h-4 w-4" />
+                      </a>
+                      <button (click)="confirmDelete(sp)" [disabled]="actionLoading() === sp.id || sp.nonEditable" class="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded" [class.opacity-50]="sp.nonEditable" [class.cursor-not-allowed]="sp.nonEditable" title="Delete">
+                        <ui-icon name="trash" class="h-4 w-4" />
+                      </button>
+                    </div>
+                  </td>
+                </tr>
+              }
+            </tbody>
+          </table>
+        </div>
+      }
+      <!-- Delete Confirmation Modal -->
+      <ui-modal [open]="showDeleteModal()" title="Delete Service Provider" (closed)="showDeleteModal.set(false)">
+        <p class="text-sm text-gray-500">
+          Are you sure you want to delete "{{ deleteTarget()?.displayName || deleteTarget()?.entityId }}"?
+          This action cannot be undone.
+        </p>
+        <div class="mt-4 flex justify-end gap-3">
+          <ui-button variant="secondary" (clicked)="showDeleteModal.set(false)">Cancel</ui-button>
+          <ui-button variant="danger" [disabled]="!!actionLoading()" (clicked)="handleDelete()">
+            {{ actionLoading() ? 'Deleting...' : 'Delete' }}
+          </ui-button>
+        </div>
+      </ui-modal>
+    </div>
+  `,
+                }]
+        }] });
+const defaultFormData = {
+    entityId: '',
+    displayName: '',
+    description: '',
+    enabled: true,
+    metadataUrl: '',
+    assertionConsumerServiceUrl: '',
+    singleLogoutServiceUrl: '',
+    signingCertificate: '',
+    encryptionCertificate: '',
+    encryptAssertions: false,
+    nameIdFormat: '',
+    requireVerifiedEmail: false,
+    allowedClaims: '',
+    claimMappings: '',
+    ssoBinding: 'POST',
+    signResponses: true,
+    signAssertions: true,
+    requireSignedAuthnRequests: false,
+    defaultRelayState: '',
+};
+class ServiceProviderDetailsPageComponent {
+    samlService = inject(SamlService);
+    route = inject(ActivatedRoute);
+    router = inject(Router);
+    entityIdCheck$ = new Subject();
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    entityIdError = signal(null, ...(ngDevMode ? [{ debugName: "entityIdError" }] : /* istanbul ignore next */ []));
+    checkingEntityId = signal(false, ...(ngDevMode ? [{ debugName: "checkingEntityId" }] : /* istanbul ignore next */ []));
+    testResult = signal(null, ...(ngDevMode ? [{ debugName: "testResult" }] : /* istanbul ignore next */ []));
+    nonEditable = signal(false, ...(ngDevMode ? [{ debugName: "nonEditable" }] : /* istanbul ignore next */ []));
+    formData = { ...defaultFormData };
+    isNew = true;
+    id = null;
+    nameIdFormats = NAME_ID_FORMATS;
+    ssoBindings = SSO_BINDINGS;
+    ngOnInit() {
+        const idParam = this.route.snapshot.paramMap.get('id');
+        this.isNew = !idParam || idParam === 'new';
+        if (!this.isNew && idParam) {
+            this.id = parseInt(idParam, 10);
+            this.loadServiceProvider();
+        }
+        // Set up entity ID availability checking with debounce
+        this.entityIdCheck$
+            .pipe(debounceTime(500), distinctUntilChanged())
+            .subscribe((entityId) => this.checkEntityIdAvailability(entityId));
+    }
+    loadServiceProvider() {
+        if (!this.id)
+            return;
+        this.loading.set(true);
+        this.samlService.getForEdit(this.id).subscribe({
+            next: (sp) => {
+                this.formData = {
+                    entityId: sp.entityId,
+                    displayName: sp.displayName || '',
+                    description: sp.description || '',
+                    enabled: sp.enabled,
+                    metadataUrl: sp.metadataUrl || '',
+                    assertionConsumerServiceUrl: sp.assertionConsumerServiceUrl || '',
+                    singleLogoutServiceUrl: sp.singleLogoutServiceUrl || '',
+                    signingCertificate: sp.signingCertificate || '',
+                    encryptionCertificate: sp.encryptionCertificate || '',
+                    encryptAssertions: sp.encryptAssertions,
+                    requireVerifiedEmail: sp.requireVerifiedEmail ?? false,
+                    nameIdFormat: sp.nameIdFormat || '',
+                    allowedClaims: sp.allowedClaims?.join(', ') || '',
+                    claimMappings: sp.claimMappings
+                        ? Object.entries(sp.claimMappings)
+                            .map(([k, v]) => `${k}=${v}`)
+                            .join('\n')
+                        : '',
+                    ssoBinding: sp.ssoBinding,
+                    signResponses: sp.signResponses,
+                    signAssertions: sp.signAssertions,
+                    requireSignedAuthnRequests: sp.requireSignedAuthnRequests,
+                    defaultRelayState: sp.defaultRelayState || '',
+                };
+                this.nonEditable.set(sp.nonEditable);
+                this.error.set(null);
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error loading service provider:', err);
+                this.error.set('Failed to load service provider');
+                this.loading.set(false);
+            },
+        });
+    }
+    onEntityIdChange(entityId) {
+        if (this.isNew && entityId) {
+            this.entityIdCheck$.next(entityId);
+        }
+    }
+    checkEntityIdAvailability(entityId) {
+        if (!entityId)
+            return;
+        this.checkingEntityId.set(true);
+        this.samlService.checkEntityIdAvailability(entityId, this.isNew ? undefined : this.id).subscribe({
+            next: (result) => {
+                if (!result.available) {
+                    this.entityIdError.set(result.message || 'Entity ID is already in use');
+                }
+                else {
+                    this.entityIdError.set(null);
+                }
+                this.checkingEntityId.set(false);
+            },
+            error: (err) => {
+                console.error('Error checking entity ID:', err);
+                this.checkingEntityId.set(false);
+            },
+        });
+    }
+    parseAllowedClaims(value) {
+        if (!value.trim())
+            return undefined;
+        return value
+            .split(',')
+            .map((s) => s.trim())
+            .filter((s) => s);
+    }
+    parseClaimMappings(value) {
+        if (!value.trim())
+            return undefined;
+        const mappings = {};
+        for (const line of value.split('\n')) {
+            const [key, val] = line.split('=').map((s) => s.trim());
+            if (key && val) {
+                mappings[key] = val;
+            }
+        }
+        return Object.keys(mappings).length > 0 ? mappings : undefined;
+    }
+    handleSubmit() {
+        if (this.entityIdError())
+            return;
+        this.saving.set(true);
+        this.error.set(null);
+        if (this.isNew) {
+            const request = {
+                entityId: this.formData.entityId,
+                displayName: this.formData.displayName || undefined,
+                description: this.formData.description || undefined,
+                enabled: this.formData.enabled,
+                metadataUrl: this.formData.metadataUrl || undefined,
+                assertionConsumerServiceUrl: this.formData.assertionConsumerServiceUrl || undefined,
+                singleLogoutServiceUrl: this.formData.singleLogoutServiceUrl || undefined,
+                signingCertificate: this.formData.signingCertificate || undefined,
+                encryptionCertificate: this.formData.encryptionCertificate || undefined,
+                encryptAssertions: this.formData.encryptAssertions,
+                requireVerifiedEmail: this.formData.requireVerifiedEmail,
+                nameIdFormat: this.formData.nameIdFormat || undefined,
+                allowedClaims: this.parseAllowedClaims(this.formData.allowedClaims),
+                claimMappings: this.parseClaimMappings(this.formData.claimMappings),
+                ssoBinding: this.formData.ssoBinding,
+                signResponses: this.formData.signResponses,
+                signAssertions: this.formData.signAssertions,
+                requireSignedAuthnRequests: this.formData.requireSignedAuthnRequests,
+                defaultRelayState: this.formData.defaultRelayState || undefined,
+            };
+            this.samlService.create(request).subscribe({
+                next: (created) => {
+                    this.router.navigate(['/saml/service-providers', created.id]);
+                },
+                error: (err) => {
+                    console.error('Error creating service provider:', err);
+                    this.error.set(err.error?.error || 'Failed to create service provider');
+                    this.saving.set(false);
+                },
+            });
+        }
+        else {
+            const request = {
+                id: this.id,
+                entityId: this.formData.entityId,
+                displayName: this.formData.displayName || undefined,
+                description: this.formData.description || undefined,
+                enabled: this.formData.enabled,
+                metadataUrl: this.formData.metadataUrl || undefined,
+                assertionConsumerServiceUrl: this.formData.assertionConsumerServiceUrl || undefined,
+                singleLogoutServiceUrl: this.formData.singleLogoutServiceUrl || undefined,
+                signingCertificate: this.formData.signingCertificate || undefined,
+                encryptionCertificate: this.formData.encryptionCertificate || undefined,
+                encryptAssertions: this.formData.encryptAssertions,
+                requireVerifiedEmail: this.formData.requireVerifiedEmail,
+                nameIdFormat: this.formData.nameIdFormat || undefined,
+                allowedClaims: this.parseAllowedClaims(this.formData.allowedClaims),
+                claimMappings: this.parseClaimMappings(this.formData.claimMappings),
+                ssoBinding: this.formData.ssoBinding,
+                signResponses: this.formData.signResponses,
+                signAssertions: this.formData.signAssertions,
+                requireSignedAuthnRequests: this.formData.requireSignedAuthnRequests,
+                defaultRelayState: this.formData.defaultRelayState || undefined,
+                nonEditable: this.nonEditable(),
+            };
+            this.samlService.update(this.id, request).subscribe({
+                next: () => {
+                    this.router.navigate(['/saml/service-providers']);
+                },
+                error: (err) => {
+                    console.error('Error updating service provider:', err);
+                    this.error.set(err.error?.error || 'Failed to save service provider');
+                    this.saving.set(false);
+                },
+            });
+        }
+    }
+    handleTest() {
+        if (this.isNew || !this.id)
+            return;
+        this.testResult.set(null);
+        this.samlService.test(this.id).subscribe({
+            next: (result) => this.testResult.set(result),
+            error: () => this.testResult.set({ success: false, message: 'Failed to run test' }),
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ServiceProviderDetailsPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: ServiceProviderDetailsPageComponent, isStandalone: true, selector: "saml-service-provider-details-page", ngImport: i0, template: `
+    <div class="space-y-6">
+      <div class="flex items-center space-x-4">
+        <a routerLink="/saml/service-providers" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+          <ui-icon name="arrow-left" class="h-5 w-5" />
+        </a>
+        <h1 class="text-2xl font-bold text-gray-900">{{ isNew ? 'Add Service Provider' : 'Edit Service Provider' }}</h1>
+      </div>
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+          <div class="bg-white shadow rounded-lg p-6 space-y-4">
+            @for (i of [1, 2, 3, 4]; track i) {
+              <div class="h-12 bg-gray-200 rounded animate-pulse"></div>
+            }
+          </div>
+        </div>
+      } @else {
+        @if (error()) {
+          <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+            <div class="flex items-center space-x-2">
+              <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+              <span class="text-red-700">{{ error() }}</span>
+            </div>
+          </div>
+        }
+        @if (nonEditable()) {
+          <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div class="flex items-center space-x-2">
+              <ui-icon name="exclamation-triangle" class="h-5 w-5 text-yellow-600" />
+              <span class="text-yellow-700">This service provider is system-managed and cannot be modified.</span>
+            </div>
+          </div>
+        }
+        @if (testResult()) {
+          <div [class]="testResult()?.success ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'" class="rounded-lg p-4 border">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-2">
+                @if (testResult()?.success) {
+                  <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+                } @else {
+                  <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+                }
+                <span [class]="testResult()?.success ? 'text-green-700' : 'text-red-700'">{{ testResult()?.message }}</span>
+              </div>
+              <button (click)="testResult.set(null)" class="text-gray-400 hover:text-gray-600">&times;</button>
+            </div>
+          </div>
+        }
+        <form (ngSubmit)="handleSubmit()" class="space-y-6">
+          <!-- Basic Information -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Basic Information</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="entityId" class="block text-sm font-medium text-gray-700">
+                  Entity ID <span class="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="entityId"
+                  [(ngModel)]="formData.entityId"
+                  name="entityId"
+                  (ngModelChange)="onEntityIdChange($event)"
+                  [disabled]="!isNew || nonEditable()"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  [class.border-red-500]="entityIdError()"
+                  [class.bg-gray-100]="!isNew"
+                  placeholder="https://sp.example.com/saml"
+                />
+                @if (checkingEntityId()) {
+                  <p class="mt-1 text-sm text-gray-500">Checking availability...</p>
+                }
+                @if (entityIdError()) {
+                  <p class="mt-1 text-sm text-red-600">{{ entityIdError() }}</p>
+                }
+                <p class="mt-1 text-xs text-gray-500">The unique SAML Entity ID for this Service Provider</p>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label for="displayName" class="block text-sm font-medium text-gray-700">Display Name</label>
+                  <input
+                    type="text"
+                    id="displayName"
+                    [(ngModel)]="formData.displayName"
+                    name="displayName"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                    placeholder="My Application"
+                  />
+                </div>
+                <div>
+                  <label for="enabled" class="block text-sm font-medium text-gray-700">Status</label>
+                  <div class="mt-2">
+                    <label class="inline-flex items-center">
+                      <input
+                        type="checkbox"
+                        [(ngModel)]="formData.enabled"
+                        name="enabled"
+                        [disabled]="nonEditable()"
+                        class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                      />
+                      <span class="ml-2 text-sm text-gray-700">Enabled</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea
+                  id="description"
+                  [(ngModel)]="formData.description"
+                  name="description"
+                  [disabled]="nonEditable()"
+                  rows="2"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="Optional description of this service provider"
+                ></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- Endpoints -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Endpoints</h2>
+              <p class="mt-1 text-sm text-gray-500">You can provide a metadata URL to auto-configure, or manually specify endpoints</p>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="metadataUrl" class="block text-sm font-medium text-gray-700">Metadata URL</label>
+                <input
+                  type="url"
+                  id="metadataUrl"
+                  [(ngModel)]="formData.metadataUrl"
+                  name="metadataUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/metadata"
+                />
+                <p class="mt-1 text-xs text-gray-500">If provided, endpoints and certificates will be fetched from metadata</p>
+              </div>
+              <div>
+                <label for="assertionConsumerServiceUrl" class="block text-sm font-medium text-gray-700">Assertion Consumer Service (ACS) URL</label>
+                <input
+                  type="url"
+                  id="assertionConsumerServiceUrl"
+                  [(ngModel)]="formData.assertionConsumerServiceUrl"
+                  name="assertionConsumerServiceUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/acs"
+                />
+                <p class="mt-1 text-xs text-gray-500">Where SAML responses should be sent (required if no metadata URL)</p>
+              </div>
+              <div>
+                <label for="singleLogoutServiceUrl" class="block text-sm font-medium text-gray-700">Single Logout Service URL</label>
+                <input
+                  type="url"
+                  id="singleLogoutServiceUrl"
+                  [(ngModel)]="formData.singleLogoutServiceUrl"
+                  name="singleLogoutServiceUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/slo"
+                />
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label for="ssoBinding" class="block text-sm font-medium text-gray-700">SSO Binding</label>
+                  <select
+                    id="ssoBinding"
+                    [(ngModel)]="formData.ssoBinding"
+                    name="ssoBinding"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  >
+                    @for (binding of ssoBindings; track binding.value) {
+                      <option [value]="binding.value">{{ binding.label }}</option>
+                    }
+                  </select>
+                </div>
+                <div>
+                  <label for="nameIdFormat" class="block text-sm font-medium text-gray-700">Name ID Format</label>
+                  <select
+                    id="nameIdFormat"
+                    [(ngModel)]="formData.nameIdFormat"
+                    name="nameIdFormat"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  >
+                    @for (format of nameIdFormats; track format.value) {
+                      <option [value]="format.value">{{ format.label }}</option>
+                    }
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Security -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Security</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.signResponses"
+                    name="signResponses"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Sign SAML Responses</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.signAssertions"
+                    name="signAssertions"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Sign SAML Assertions</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.requireSignedAuthnRequests"
+                    name="requireSignedAuthnRequests"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Require Signed AuthnRequests</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.encryptAssertions"
+                    name="encryptAssertions"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Encrypt Assertions</span>
+                </label>
+                <label class="flex items-start md:col-span-2">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.requireVerifiedEmail"
+                    name="requireVerifiedEmail"
+                    [disabled]="nonEditable()"
+                    class="mt-0.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">
+                    Require a verified email address
+                    <span class="block text-xs text-gray-500">
+                      Only people whose email is verified get assertions for this service provider. Always applies
+                      when the Name ID format is the email address.
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label for="signingCertificate" class="block text-sm font-medium text-gray-700">SP Signing Certificate (Base64)</label>
+                <textarea
+                  id="signingCertificate"
+                  [(ngModel)]="formData.signingCertificate"
+                  name="signingCertificate"
+                  [disabled]="nonEditable()"
+                  rows="3"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-xs"
+                  placeholder="MIIDx..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Public certificate for verifying signed AuthnRequests from this SP</p>
+              </div>
+              <div>
+                <label for="encryptionCertificate" class="block text-sm font-medium text-gray-700">SP Encryption Certificate (Base64)</label>
+                <textarea
+                  id="encryptionCertificate"
+                  [(ngModel)]="formData.encryptionCertificate"
+                  name="encryptionCertificate"
+                  [disabled]="nonEditable()"
+                  rows="3"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-xs"
+                  placeholder="MIIDx..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Public certificate for encrypting assertions sent to this SP</p>
+              </div>
+            </div>
+          </div>
+          <!-- Claims -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Claims Configuration</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="allowedClaims" class="block text-sm font-medium text-gray-700">Allowed Claims</label>
+                <input
+                  type="text"
+                  id="allowedClaims"
+                  [(ngModel)]="formData.allowedClaims"
+                  name="allowedClaims"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="email, name, given_name, family_name"
+                />
+                <p class="mt-1 text-xs text-gray-500">Comma-separated list of claim types to include in assertions (empty = all claims)</p>
+              </div>
+              <div>
+                <label for="claimMappings" class="block text-sm font-medium text-gray-700">Claim Mappings</label>
+                <textarea
+                  id="claimMappings"
+                  [(ngModel)]="formData.claimMappings"
+                  name="claimMappings"
+                  [disabled]="nonEditable()"
+                  rows="4"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-sm"
+                  placeholder="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress=email"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Map SAML attribute names to claim types (one per line: samlAttribute=claimType)</p>
+              </div>
+              <div>
+                <label for="defaultRelayState" class="block text-sm font-medium text-gray-700">Default RelayState</label>
+                <input
+                  type="text"
+                  id="defaultRelayState"
+                  [(ngModel)]="formData.defaultRelayState"
+                  name="defaultRelayState"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/dashboard"
+                />
+                <p class="mt-1 text-xs text-gray-500">Default redirect URL if the SP doesn't provide a RelayState</p>
+              </div>
+            </div>
+          </div>
+          <!-- Actions -->
+          <div class="flex items-center justify-between">
+            <div>
+              @if (!isNew) {
+                <ui-button type="button" variant="secondary" (clicked)="handleTest()">Test Configuration</ui-button>
+              }
+            </div>
+            <div class="flex items-center space-x-4">
+              <a routerLink="/saml/service-providers">
+                <ui-button type="button" variant="secondary">Cancel</ui-button>
+              </a>
+              <ui-button type="submit" [disabled]="saving() || nonEditable() || !!entityIdError()">
+                {{ saving() ? 'Saving...' : isNew ? 'Create Service Provider' : 'Save Changes' }}
+              </ui-button>
+            </div>
+          </div>
+        </form>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: ServiceProviderDetailsPageComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'saml-service-provider-details-page',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, RouterLink, ButtonComponent, IconComponent],
+                    template: `
+    <div class="space-y-6">
+      <div class="flex items-center space-x-4">
+        <a routerLink="/saml/service-providers" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded">
+          <ui-icon name="arrow-left" class="h-5 w-5" />
+        </a>
+        <h1 class="text-2xl font-bold text-gray-900">{{ isNew ? 'Add Service Provider' : 'Edit Service Provider' }}</h1>
+      </div>
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-48 bg-gray-200 rounded animate-pulse"></div>
+          <div class="bg-white shadow rounded-lg p-6 space-y-4">
+            @for (i of [1, 2, 3, 4]; track i) {
+              <div class="h-12 bg-gray-200 rounded animate-pulse"></div>
+            }
+          </div>
+        </div>
+      } @else {
+        @if (error()) {
+          <div class="bg-red-50 border border-red-200 rounded-lg p-4">
+            <div class="flex items-center space-x-2">
+              <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+              <span class="text-red-700">{{ error() }}</span>
+            </div>
+          </div>
+        }
+        @if (nonEditable()) {
+          <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4">
+            <div class="flex items-center space-x-2">
+              <ui-icon name="exclamation-triangle" class="h-5 w-5 text-yellow-600" />
+              <span class="text-yellow-700">This service provider is system-managed and cannot be modified.</span>
+            </div>
+          </div>
+        }
+        @if (testResult()) {
+          <div [class]="testResult()?.success ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'" class="rounded-lg p-4 border">
+            <div class="flex items-center justify-between">
+              <div class="flex items-center space-x-2">
+                @if (testResult()?.success) {
+                  <ui-icon name="check-circle" class="h-5 w-5 text-green-600" />
+                } @else {
+                  <ui-icon name="x-circle" class="h-5 w-5 text-red-600" />
+                }
+                <span [class]="testResult()?.success ? 'text-green-700' : 'text-red-700'">{{ testResult()?.message }}</span>
+              </div>
+              <button (click)="testResult.set(null)" class="text-gray-400 hover:text-gray-600">&times;</button>
+            </div>
+          </div>
+        }
+        <form (ngSubmit)="handleSubmit()" class="space-y-6">
+          <!-- Basic Information -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Basic Information</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="entityId" class="block text-sm font-medium text-gray-700">
+                  Entity ID <span class="text-red-500">*</span>
+                </label>
+                <input
+                  type="text"
+                  id="entityId"
+                  [(ngModel)]="formData.entityId"
+                  name="entityId"
+                  (ngModelChange)="onEntityIdChange($event)"
+                  [disabled]="!isNew || nonEditable()"
+                  required
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  [class.border-red-500]="entityIdError()"
+                  [class.bg-gray-100]="!isNew"
+                  placeholder="https://sp.example.com/saml"
+                />
+                @if (checkingEntityId()) {
+                  <p class="mt-1 text-sm text-gray-500">Checking availability...</p>
+                }
+                @if (entityIdError()) {
+                  <p class="mt-1 text-sm text-red-600">{{ entityIdError() }}</p>
+                }
+                <p class="mt-1 text-xs text-gray-500">The unique SAML Entity ID for this Service Provider</p>
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label for="displayName" class="block text-sm font-medium text-gray-700">Display Name</label>
+                  <input
+                    type="text"
+                    id="displayName"
+                    [(ngModel)]="formData.displayName"
+                    name="displayName"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                    placeholder="My Application"
+                  />
+                </div>
+                <div>
+                  <label for="enabled" class="block text-sm font-medium text-gray-700">Status</label>
+                  <div class="mt-2">
+                    <label class="inline-flex items-center">
+                      <input
+                        type="checkbox"
+                        [(ngModel)]="formData.enabled"
+                        name="enabled"
+                        [disabled]="nonEditable()"
+                        class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                      />
+                      <span class="ml-2 text-sm text-gray-700">Enabled</span>
+                    </label>
+                  </div>
+                </div>
+              </div>
+              <div>
+                <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
+                <textarea
+                  id="description"
+                  [(ngModel)]="formData.description"
+                  name="description"
+                  [disabled]="nonEditable()"
+                  rows="2"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="Optional description of this service provider"
+                ></textarea>
+              </div>
+            </div>
+          </div>
+          <!-- Endpoints -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Endpoints</h2>
+              <p class="mt-1 text-sm text-gray-500">You can provide a metadata URL to auto-configure, or manually specify endpoints</p>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="metadataUrl" class="block text-sm font-medium text-gray-700">Metadata URL</label>
+                <input
+                  type="url"
+                  id="metadataUrl"
+                  [(ngModel)]="formData.metadataUrl"
+                  name="metadataUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/metadata"
+                />
+                <p class="mt-1 text-xs text-gray-500">If provided, endpoints and certificates will be fetched from metadata</p>
+              </div>
+              <div>
+                <label for="assertionConsumerServiceUrl" class="block text-sm font-medium text-gray-700">Assertion Consumer Service (ACS) URL</label>
+                <input
+                  type="url"
+                  id="assertionConsumerServiceUrl"
+                  [(ngModel)]="formData.assertionConsumerServiceUrl"
+                  name="assertionConsumerServiceUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/acs"
+                />
+                <p class="mt-1 text-xs text-gray-500">Where SAML responses should be sent (required if no metadata URL)</p>
+              </div>
+              <div>
+                <label for="singleLogoutServiceUrl" class="block text-sm font-medium text-gray-700">Single Logout Service URL</label>
+                <input
+                  type="url"
+                  id="singleLogoutServiceUrl"
+                  [(ngModel)]="formData.singleLogoutServiceUrl"
+                  name="singleLogoutServiceUrl"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/saml/slo"
+                />
+              </div>
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label for="ssoBinding" class="block text-sm font-medium text-gray-700">SSO Binding</label>
+                  <select
+                    id="ssoBinding"
+                    [(ngModel)]="formData.ssoBinding"
+                    name="ssoBinding"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  >
+                    @for (binding of ssoBindings; track binding.value) {
+                      <option [value]="binding.value">{{ binding.label }}</option>
+                    }
+                  </select>
+                </div>
+                <div>
+                  <label for="nameIdFormat" class="block text-sm font-medium text-gray-700">Name ID Format</label>
+                  <select
+                    id="nameIdFormat"
+                    [(ngModel)]="formData.nameIdFormat"
+                    name="nameIdFormat"
+                    [disabled]="nonEditable()"
+                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  >
+                    @for (format of nameIdFormats; track format.value) {
+                      <option [value]="format.value">{{ format.label }}</option>
+                    }
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+          <!-- Security -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Security</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.signResponses"
+                    name="signResponses"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Sign SAML Responses</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.signAssertions"
+                    name="signAssertions"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Sign SAML Assertions</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.requireSignedAuthnRequests"
+                    name="requireSignedAuthnRequests"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Require Signed AuthnRequests</span>
+                </label>
+                <label class="flex items-center">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.encryptAssertions"
+                    name="encryptAssertions"
+                    [disabled]="nonEditable()"
+                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">Encrypt Assertions</span>
+                </label>
+                <label class="flex items-start md:col-span-2">
+                  <input
+                    type="checkbox"
+                    [(ngModel)]="formData.requireVerifiedEmail"
+                    name="requireVerifiedEmail"
+                    [disabled]="nonEditable()"
+                    class="mt-0.5 rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+                  />
+                  <span class="ml-2 text-sm text-gray-700">
+                    Require a verified email address
+                    <span class="block text-xs text-gray-500">
+                      Only people whose email is verified get assertions for this service provider. Always applies
+                      when the Name ID format is the email address.
+                    </span>
+                  </span>
+                </label>
+              </div>
+              <div>
+                <label for="signingCertificate" class="block text-sm font-medium text-gray-700">SP Signing Certificate (Base64)</label>
+                <textarea
+                  id="signingCertificate"
+                  [(ngModel)]="formData.signingCertificate"
+                  name="signingCertificate"
+                  [disabled]="nonEditable()"
+                  rows="3"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-xs"
+                  placeholder="MIIDx..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Public certificate for verifying signed AuthnRequests from this SP</p>
+              </div>
+              <div>
+                <label for="encryptionCertificate" class="block text-sm font-medium text-gray-700">SP Encryption Certificate (Base64)</label>
+                <textarea
+                  id="encryptionCertificate"
+                  [(ngModel)]="formData.encryptionCertificate"
+                  name="encryptionCertificate"
+                  [disabled]="nonEditable()"
+                  rows="3"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-xs"
+                  placeholder="MIIDx..."
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Public certificate for encrypting assertions sent to this SP</p>
+              </div>
+            </div>
+          </div>
+          <!-- Claims -->
+          <div class="bg-white shadow rounded-lg">
+            <div class="px-6 py-4 border-b border-gray-200">
+              <h2 class="text-lg font-medium text-gray-900">Claims Configuration</h2>
+            </div>
+            <div class="px-6 py-4 space-y-4">
+              <div>
+                <label for="allowedClaims" class="block text-sm font-medium text-gray-700">Allowed Claims</label>
+                <input
+                  type="text"
+                  id="allowedClaims"
+                  [(ngModel)]="formData.allowedClaims"
+                  name="allowedClaims"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="email, name, given_name, family_name"
+                />
+                <p class="mt-1 text-xs text-gray-500">Comma-separated list of claim types to include in assertions (empty = all claims)</p>
+              </div>
+              <div>
+                <label for="claimMappings" class="block text-sm font-medium text-gray-700">Claim Mappings</label>
+                <textarea
+                  id="claimMappings"
+                  [(ngModel)]="formData.claimMappings"
+                  name="claimMappings"
+                  [disabled]="nonEditable()"
+                  rows="4"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 font-mono text-sm"
+                  placeholder="http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress=email"
+                ></textarea>
+                <p class="mt-1 text-xs text-gray-500">Map SAML attribute names to claim types (one per line: samlAttribute=claimType)</p>
+              </div>
+              <div>
+                <label for="defaultRelayState" class="block text-sm font-medium text-gray-700">Default RelayState</label>
+                <input
+                  type="text"
+                  id="defaultRelayState"
+                  [(ngModel)]="formData.defaultRelayState"
+                  name="defaultRelayState"
+                  [disabled]="nonEditable()"
+                  class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500"
+                  placeholder="https://sp.example.com/dashboard"
+                />
+                <p class="mt-1 text-xs text-gray-500">Default redirect URL if the SP doesn't provide a RelayState</p>
+              </div>
+            </div>
+          </div>
+          <!-- Actions -->
+          <div class="flex items-center justify-between">
+            <div>
+              @if (!isNew) {
+                <ui-button type="button" variant="secondary" (clicked)="handleTest()">Test Configuration</ui-button>
+              }
+            </div>
+            <div class="flex items-center space-x-4">
+              <a routerLink="/saml/service-providers">
+                <ui-button type="button" variant="secondary">Cancel</ui-button>
+              </a>
+              <ui-button type="submit" [disabled]="saving() || nonEditable() || !!entityIdError()">
+                {{ saving() ? 'Saving...' : isNew ? 'Create Service Provider' : 'Save Changes' }}
+              </ui-button>
+            </div>
+          </div>
+        </form>
+      }
+    </div>
+  `,
+                }]
+        }] });
+class SamlIdpSettingsTabComponent {
+    samlService = inject(SamlService);
+    tabContext = inject(TAB_CONTEXT, { optional: true });
+    loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+    saving = signal(false, ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : /* istanbul ignore next */ []));
+    success = signal(null, ...(ngDevMode ? [{ debugName: "success" }] : /* istanbul ignore next */ []));
+    hasChanges = signal(false, ...(ngDevMode ? [{ debugName: "hasChanges" }] : /* istanbul ignore next */ []));
+    idpInfo = signal(null, ...(ngDevMode ? [{ debugName: "idpInfo" }] : /* istanbul ignore next */ []));
+    signingCert = signal(null, ...(ngDevMode ? [{ debugName: "signingCert" }] : /* istanbul ignore next */ []));
+    encryptionCert = signal(null, ...(ngDevMode ? [{ debugName: "encryptionCert" }] : /* istanbul ignore next */ []));
+    certLoading = signal(null, ...(ngDevMode ? [{ debugName: "certLoading" }] : /* istanbul ignore next */ []));
+    copied = signal(null, ...(ngDevMode ? [{ debugName: "copied" }] : /* istanbul ignore next */ []));
+    showSigningUpload = signal(false, ...(ngDevMode ? [{ debugName: "showSigningUpload" }] : /* istanbul ignore next */ []));
+    showEncryptionUpload = signal(false, ...(ngDevMode ? [{ debugName: "showEncryptionUpload" }] : /* istanbul ignore next */ []));
+    config = {
+        enabled: false,
+        loginJourneyName: undefined,
+    };
+    signingPassword = '';
+    encryptionPassword = '';
+    ngOnInit() {
+        this.loadData();
+    }
+    loadData() {
+        this.loading.set(true);
+        forkJoin({
+            config: this.samlService.getIdpConfiguration(),
+            idpInfo: this.samlService.getIdpInfo().pipe(catchError(() => of(null))),
+            signingCert: this.samlService.getSigningCertificate().pipe(catchError(() => of(null))),
+            encryptionCert: this.samlService.getEncryptionCertificate().pipe(catchError(() => of(null))),
+        }).subscribe({
+            next: (data) => {
+                this.config = data.config;
+                this.idpInfo.set(data.idpInfo);
+                this.signingCert.set(data.signingCert);
+                this.encryptionCert.set(data.encryptionCert);
+                this.error.set(null);
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error loading SAML IdP config:', err);
+                this.error.set('Failed to load SAML IdP configuration');
+                this.loading.set(false);
+            },
+        });
+    }
+    toggleEnabled() {
+        this.config.enabled = !this.config.enabled;
+        this.onConfigChange();
+    }
+    onConfigChange() {
+        this.hasChanges.set(true);
+        this.success.set(null);
+    }
+    handleSave() {
+        this.saving.set(true);
+        this.error.set(null);
+        this.samlService.updateIdpConfiguration(this.config).subscribe({
+            next: () => {
+                this.success.set('SAML IdP settings saved successfully');
+                this.hasChanges.set(false);
+                this.saving.set(false);
+                // Reload IdP info in case endpoints changed
+                this.samlService.getIdpInfo().subscribe({
+                    next: (info) => this.idpInfo.set(info),
+                    error: () => { },
+                });
+            },
+            error: (err) => {
+                console.error('Error saving SAML IdP config:', err);
+                this.error.set('Failed to save SAML IdP configuration');
+                this.saving.set(false);
+            },
+        });
+    }
+    // Signing Certificate Methods
+    generateSigningCert() {
+        this.certLoading.set('signing');
+        this.samlService.generateSigningCertificate().subscribe({
+            next: (cert) => {
+                this.signingCert.set(cert);
+                this.success.set('Signing certificate generated successfully');
+                this.certLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error generating signing certificate:', err);
+                this.error.set('Failed to generate signing certificate');
+                this.certLoading.set(null);
+            },
+        });
+    }
+    resetSigningCert() {
+        this.certLoading.set('signing');
+        this.samlService.resetSigningCertificate().subscribe({
+            next: () => {
+                this.loadCertificates();
+                this.success.set('Signing certificate reset to global');
+                this.certLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error resetting signing certificate:', err);
+                this.error.set('Failed to reset signing certificate');
+                this.certLoading.set(null);
+            },
+        });
+    }
+    toggleSigningUpload() {
+        this.showSigningUpload.update((v) => !v);
+        if (!this.showSigningUpload()) {
+            this.signingPassword = '';
+        }
+    }
+    onSigningFileSelect(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        this.certLoading.set('signing');
+        const reader = new FileReader();
+        reader.onload = () => {
+            const arrayBuffer = reader.result;
+            const bytes = new Uint8Array(arrayBuffer);
+            const base64 = btoa(String.fromCharCode(...bytes));
+            this.samlService.uploadSigningCertificate({
+                base64Pfx: base64,
+                password: this.signingPassword || undefined,
+            }).subscribe({
+                next: (cert) => {
+                    this.signingCert.set(cert);
+                    this.success.set('Signing certificate uploaded successfully');
+                    this.certLoading.set(null);
+                    this.showSigningUpload.set(false);
+                    this.signingPassword = '';
+                },
+                error: (err) => {
+                    console.error('Error uploading signing certificate:', err);
+                    this.error.set('Failed to upload signing certificate');
+                    this.certLoading.set(null);
+                },
+            });
+        };
+        reader.readAsArrayBuffer(file);
+        input.value = '';
+    }
+    // Encryption Certificate Methods
+    generateEncryptionCert() {
+        this.certLoading.set('encryption');
+        this.samlService.generateEncryptionCertificate().subscribe({
+            next: (cert) => {
+                this.encryptionCert.set(cert);
+                this.success.set('Encryption certificate generated successfully');
+                this.certLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error generating encryption certificate:', err);
+                this.error.set('Failed to generate encryption certificate');
+                this.certLoading.set(null);
+            },
+        });
+    }
+    resetEncryptionCert() {
+        this.certLoading.set('encryption');
+        this.samlService.resetEncryptionCertificate().subscribe({
+            next: () => {
+                this.loadCertificates();
+                this.success.set('Encryption certificate reset to global');
+                this.certLoading.set(null);
+            },
+            error: (err) => {
+                console.error('Error resetting encryption certificate:', err);
+                this.error.set('Failed to reset encryption certificate');
+                this.certLoading.set(null);
+            },
+        });
+    }
+    toggleEncryptionUpload() {
+        this.showEncryptionUpload.update((v) => !v);
+        if (!this.showEncryptionUpload()) {
+            this.encryptionPassword = '';
+        }
+    }
+    onEncryptionFileSelect(event) {
+        const input = event.target;
+        const file = input.files?.[0];
+        if (!file)
+            return;
+        this.certLoading.set('encryption');
+        const reader = new FileReader();
+        reader.onload = () => {
+            const arrayBuffer = reader.result;
+            const bytes = new Uint8Array(arrayBuffer);
+            const base64 = btoa(String.fromCharCode(...bytes));
+            this.samlService.uploadEncryptionCertificate({
+                base64Pfx: base64,
+                password: this.encryptionPassword || undefined,
+            }).subscribe({
+                next: (cert) => {
+                    this.encryptionCert.set(cert);
+                    this.success.set('Encryption certificate uploaded successfully');
+                    this.certLoading.set(null);
+                    this.showEncryptionUpload.set(false);
+                    this.encryptionPassword = '';
+                },
+                error: (err) => {
+                    console.error('Error uploading encryption certificate:', err);
+                    this.error.set('Failed to upload encryption certificate');
+                    this.certLoading.set(null);
+                },
+            });
+        };
+        reader.readAsArrayBuffer(file);
+        input.value = '';
+    }
+    loadCertificates() {
+        forkJoin({
+            signing: this.samlService.getSigningCertificate().pipe(catchError(() => of(null))),
+            encryption: this.samlService.getEncryptionCertificate().pipe(catchError(() => of(null))),
+        }).subscribe({
+            next: (data) => {
+                this.signingCert.set(data.signing);
+                this.encryptionCert.set(data.encryption);
+            },
+            error: (err) => {
+                console.error('Error loading certificates:', err);
+            },
+        });
+    }
+    copyToClipboard(value, key = 'metadata') {
+        navigator.clipboard.writeText(value).then(() => {
+            this.copied.set(key);
+            setTimeout(() => this.copied.set(null), 2000);
+        });
+    }
+    formatDate(dateStr) {
+        if (!dateStr)
+            return 'N/A';
+        return new Date(dateStr).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    truncateThumbprint(thumbprint) {
+        if (!thumbprint)
+            return 'N/A';
+        return thumbprint.substring(0, 16) + '...';
+    }
+    getSourceBadgeClass(source) {
+        switch (source) {
+            case 'Global':
+                return 'bg-gray-100 text-gray-800';
+            case 'Auto':
+                return 'bg-blue-100 text-blue-800';
+            case 'Uploaded':
+                return 'bg-green-100 text-green-800';
+            default:
+                return 'bg-gray-100 text-gray-800';
+        }
+    }
+    getSourceBadgeText(source) {
+        switch (source) {
+            case 'Auto':
+                return 'Auto-generated';
+            default:
+                return source;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlIdpSettingsTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: SamlIdpSettingsTabComponent, isStandalone: true, selector: "saml-idp-settings-tab", ngImport: i0, template: `
+    <div class="space-y-6">
+      @if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center space-x-2">
+          <ui-icon name="exclamation-circle" class="h-5 w-5 text-red-500" />
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      }
+      @if (success()) {
+        <div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-center space-x-2">
+          <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+          <p class="text-green-700">{{ success() }}</p>
+        </div>
+      }
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-64 bg-gray-200 rounded animate-pulse"></div>
+          <div class="h-48 bg-gray-200 rounded-lg animate-pulse"></div>
+        </div>
+      } @else {
+        <!-- SAML IdP Settings -->
+        <div class="space-y-6">
+          <div>
+            <h3 class="text-lg font-medium text-gray-900">SAML IdP Configuration</h3>
+            <p class="mt-1 text-sm text-gray-500">Enable and configure SAML Identity Provider functionality for this tenant</p>
+          </div>
+          <!-- Enable Toggle -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-gray-700">Enable SAML IdP</p>
+              <p class="text-sm text-gray-500">Allow external Service Providers to authenticate users via SAML</p>
+            </div>
+            <button
+              type="button"
+              (click)="toggleEnabled()"
+              [class]="config.enabled ? 'bg-primary-600' : 'bg-gray-200'"
+              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+              role="switch"
+              [attr.aria-checked]="config.enabled"
+            >
+              <span
+                [class]="config.enabled ? 'translate-x-5' : 'translate-x-0'"
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+              ></span>
+            </button>
+          </div>
+          <!-- Login Journey Name -->
+          <div>
+            <label for="loginJourneyName" class="block text-sm font-medium text-gray-700">Login Journey Name</label>
+            <input
+              type="text"
+              id="loginJourneyName"
+              [(ngModel)]="config.loginJourneyName"
+              (ngModelChange)="onConfigChange()"
+              placeholder="default-login"
+              [disabled]="!config.enabled"
+              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500"
+            />
+            <p class="mt-2 text-sm text-gray-500">
+              Journey to use for SAML SSO authentication. Leave empty to use the standalone login page at
+              <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/account/login</code>.
+            </p>
+          </div>
+          <!-- Info Box -->
+          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="flex">
+              <ui-icon name="information-circle" class="h-5 w-5 text-blue-500 flex-shrink-0" />
+              <div class="ml-3">
+                <h4 class="text-sm font-medium text-blue-800">How SAML IdP Authentication Works</h4>
+                <p class="mt-1 text-sm text-blue-700">
+                  When a Service Provider sends an authentication request, users will be redirected to
+                  the configured login journey (or the standalone login page if not specified). After
+                  authentication, users are returned to the Service Provider with a SAML assertion.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- IdP Endpoints Info - Only show when enabled and info available -->
+        @if (config.enabled && idpInfo()) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Endpoints</h3>
+              <p class="mt-1 text-sm text-gray-500">Share these URLs with Service Providers to configure SSO</p>
+            </div>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata URL:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.metadataUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.metadataUrl || '', 'metadata')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'metadata' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.singleSignOnServiceUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleSignOnServiceUrl || '', 'sso')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'sso' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SLO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.singleLogoutServiceUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleLogoutServiceUrl || '', 'slo')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'slo' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Entity ID:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.entityId }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.entityId || '', 'entity')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'entity' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- Endpoints Preview - Show when enabled but IdP info not available -->
+        @if (config.enabled && !idpInfo()) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Endpoints</h3>
+              <p class="mt-1 text-sm text-gray-500">These endpoints will be available once SAML IdP is enabled</p>
+            </div>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/metadata</code>
+                </div>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/sso</code>
+                </div>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SLO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/slo</code>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- IdP Certificates - Show when enabled -->
+        @if (config.enabled) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Certificates</h3>
+              <p class="mt-1 text-sm text-gray-500">Configure certificates for signing SAML assertions and decrypting requests</p>
+            </div>
+            <!-- Signing Certificate -->
+            <div class="bg-gray-50 rounded-lg p-4 space-y-3">
+              <div class="flex items-start justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="shield-check" class="h-5 w-5 text-gray-400" />
+                    <h4 class="text-sm font-medium text-gray-900">Signing Certificate</h4>
+                    @if (signingCert()) {
+                      <span [class]="getSourceBadgeClass(signingCert()?.source || '')" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium">
+                        {{ getSourceBadgeText(signingCert()?.source || '') }}
+                      </span>
+                    }
+                  </div>
+                  <p class="text-sm text-gray-500 mt-1">Used to sign SAML assertions sent to Service Providers</p>
+                </div>
+              </div>
+              @if (signingCert()?.hasCertificate) {
+                <div [class]="signingCert()?.isRevoked ? 'bg-red-50 rounded border border-red-300 p-3 space-y-2' : 'bg-white rounded border border-gray-200 p-3 space-y-2'">
+                  @if (signingCert()?.isRevoked) {
+                    <div class="flex items-center gap-2 text-red-700 bg-red-100 rounded px-2 py-1 mb-2">
+                      <ui-icon name="warning" class="h-4 w-4" />
+                      <span class="text-sm font-medium">Certificate Revoked - Please generate a new certificate</span>
+                    </div>
+                  }
+                  <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+                    <div>
+                      <span class="text-gray-500">Subject:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ signingCert()?.subject || 'N/A' }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Thumbprint:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ truncateThumbprint(signingCert()?.thumbprint) }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Valid From:</span>
+                      <span class="ml-2 text-gray-900">{{ formatDate(signingCert()?.notBefore) }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="text-gray-500">Valid Until:</span>
+                      <span [class]="signingCert()?.isRevoked ? 'text-red-600' : signingCert()?.isExpired ? 'text-red-600' : signingCert()?.isExpiringSoon ? 'text-yellow-600' : 'text-gray-900'" class="ml-2">
+                        {{ formatDate(signingCert()?.notAfter) }}
+                      </span>
+                      @if (signingCert()?.isRevoked) {
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Revoked</span>
+                      }
+                      @if (!signingCert()?.isRevoked && signingCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-red-500" />
+                      }
+                      @if (!signingCert()?.isRevoked && signingCert()?.isExpiringSoon && !signingCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-yellow-500" />
+                      }
+                    </div>
+                  </div>
+                </div>
+              } @else {
+                <div class="text-sm text-gray-500 italic">No certificate configured. Using global certificate.</div>
+              }
+              <!-- Action buttons -->
+              <div class="flex items-center gap-2 pt-2">
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="generateSigningCert()">
+                  @if (certLoading() === 'signing') {
+                    <svg class="h-4 w-4 mr-1.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  } @else {
+                    <ui-icon name="refresh" class="h-4 w-4 mr-1.5" />
+                  }
+                  Generate New
+                </ui-button>
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="toggleSigningUpload()">
+                  <ui-icon name="arrow-up-tray" class="h-4 w-4 mr-1.5" />
+                  Upload PFX
+                </ui-button>
+                @if (signingCert()?.source !== 'Global') {
+                  <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="resetSigningCert()">
+                    Reset to Global
+                  </ui-button>
+                }
+              </div>
+              <!-- Upload form for signing cert -->
+              @if (showSigningUpload()) {
+                <div class="bg-white rounded border border-gray-200 p-3 space-y-3">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">PFX Password (optional)</label>
+                    <input
+                      type="password"
+                      [(ngModel)]="signingPassword"
+                      placeholder="Enter password if PFX is protected"
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">Select PFX File</label>
+                    <input
+                      type="file"
+                      accept=".pfx,.p12"
+                      (change)="onSigningFileSelect($event)"
+                      [disabled]="certLoading() === 'signing'"
+                      class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    (click)="toggleSigningUpload()"
+                    class="text-sm text-gray-500 hover:text-gray-700"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              }
+            </div>
+            <!-- Encryption Certificate -->
+            <div class="bg-gray-50 rounded-lg p-4 space-y-3">
+              <div class="flex items-start justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="shield-check" class="h-5 w-5 text-gray-400" />
+                    <h4 class="text-sm font-medium text-gray-900">Encryption Certificate</h4>
+                    @if (encryptionCert()) {
+                      <span [class]="getSourceBadgeClass(encryptionCert()?.source || '')" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium">
+                        {{ getSourceBadgeText(encryptionCert()?.source || '') }}
+                      </span>
+                    }
+                  </div>
+                  <p class="text-sm text-gray-500 mt-1">Used to decrypt incoming encrypted SAML requests (optional)</p>
+                </div>
+              </div>
+              @if (encryptionCert()?.hasCertificate) {
+                <div [class]="encryptionCert()?.isRevoked ? 'bg-red-50 rounded border border-red-300 p-3 space-y-2' : 'bg-white rounded border border-gray-200 p-3 space-y-2'">
+                  @if (encryptionCert()?.isRevoked) {
+                    <div class="flex items-center gap-2 text-red-700 bg-red-100 rounded px-2 py-1 mb-2">
+                      <ui-icon name="warning" class="h-4 w-4" />
+                      <span class="text-sm font-medium">Certificate Revoked - Please generate a new certificate</span>
+                    </div>
+                  }
+                  <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+                    <div>
+                      <span class="text-gray-500">Subject:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ encryptionCert()?.subject || 'N/A' }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Thumbprint:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ truncateThumbprint(encryptionCert()?.thumbprint) }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Valid From:</span>
+                      <span class="ml-2 text-gray-900">{{ formatDate(encryptionCert()?.notBefore) }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="text-gray-500">Valid Until:</span>
+                      <span [class]="encryptionCert()?.isRevoked ? 'text-red-600' : encryptionCert()?.isExpired ? 'text-red-600' : encryptionCert()?.isExpiringSoon ? 'text-yellow-600' : 'text-gray-900'" class="ml-2">
+                        {{ formatDate(encryptionCert()?.notAfter) }}
+                      </span>
+                      @if (encryptionCert()?.isRevoked) {
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Revoked</span>
+                      }
+                      @if (!encryptionCert()?.isRevoked && encryptionCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-red-500" />
+                      }
+                      @if (!encryptionCert()?.isRevoked && encryptionCert()?.isExpiringSoon && !encryptionCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-yellow-500" />
+                      }
+                    </div>
+                  </div>
+                </div>
+              } @else {
+                <div class="text-sm text-gray-500 italic">No certificate configured. Using global certificate.</div>
+              }
+              <!-- Action buttons -->
+              <div class="flex items-center gap-2 pt-2">
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="generateEncryptionCert()">
+                  @if (certLoading() === 'encryption') {
+                    <svg class="h-4 w-4 mr-1.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  } @else {
+                    <ui-icon name="refresh" class="h-4 w-4 mr-1.5" />
+                  }
+                  Generate New
+                </ui-button>
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="toggleEncryptionUpload()">
+                  <ui-icon name="arrow-up-tray" class="h-4 w-4 mr-1.5" />
+                  Upload PFX
+                </ui-button>
+                @if (encryptionCert()?.source !== 'Global') {
+                  <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="resetEncryptionCert()">
+                    Reset to Global
+                  </ui-button>
+                }
+              </div>
+              <!-- Upload form for encryption cert -->
+              @if (showEncryptionUpload()) {
+                <div class="bg-white rounded border border-gray-200 p-3 space-y-3">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">PFX Password (optional)</label>
+                    <input
+                      type="password"
+                      [(ngModel)]="encryptionPassword"
+                      placeholder="Enter password if PFX is protected"
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">Select PFX File</label>
+                    <input
+                      type="file"
+                      accept=".pfx,.p12"
+                      (change)="onEncryptionFileSelect($event)"
+                      [disabled]="certLoading() === 'encryption'"
+                      class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    (click)="toggleEncryptionUpload()"
+                    class="text-sm text-gray-500 hover:text-gray-700"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              }
+            </div>
+          </div>
+        }
+        <!-- Save Button -->
+        <div class="flex justify-end items-center gap-4 pt-4 border-t border-gray-200">
+          @if (hasChanges()) {
+            <span class="text-sm text-gray-500">You have unsaved changes</span>
+          }
+          <ui-button [disabled]="!hasChanges() || saving()" (clicked)="handleSave()">
+            {{ saving() ? 'Saving...' : 'Save Settings' }}
+          </ui-button>
+        </div>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["variant", "size", "disabled", "loading", "type", "fullWidth"], outputs: ["clicked"] }, { kind: "component", type: IconComponent, selector: "ui-icon", inputs: ["name", "strokeWidth"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SamlIdpSettingsTabComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'saml-idp-settings-tab',
+                    standalone: true,
+                    imports: [CommonModule, FormsModule, ButtonComponent, IconComponent],
+                    template: `
+    <div class="space-y-6">
+      @if (error()) {
+        <div class="bg-red-50 border border-red-200 rounded-lg p-4 flex items-center space-x-2">
+          <ui-icon name="exclamation-circle" class="h-5 w-5 text-red-500" />
+          <p class="text-red-700">{{ error() }}</p>
+        </div>
+      }
+      @if (success()) {
+        <div class="bg-green-50 border border-green-200 rounded-lg p-4 flex items-center space-x-2">
+          <ui-icon name="check-circle" class="h-5 w-5 text-green-500" />
+          <p class="text-green-700">{{ success() }}</p>
+        </div>
+      }
+      @if (loading()) {
+        <div class="space-y-6">
+          <div class="h-8 w-64 bg-gray-200 rounded animate-pulse"></div>
+          <div class="h-48 bg-gray-200 rounded-lg animate-pulse"></div>
+        </div>
+      } @else {
+        <!-- SAML IdP Settings -->
+        <div class="space-y-6">
+          <div>
+            <h3 class="text-lg font-medium text-gray-900">SAML IdP Configuration</h3>
+            <p class="mt-1 text-sm text-gray-500">Enable and configure SAML Identity Provider functionality for this tenant</p>
+          </div>
+          <!-- Enable Toggle -->
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="text-sm font-medium text-gray-700">Enable SAML IdP</p>
+              <p class="text-sm text-gray-500">Allow external Service Providers to authenticate users via SAML</p>
+            </div>
+            <button
+              type="button"
+              (click)="toggleEnabled()"
+              [class]="config.enabled ? 'bg-primary-600' : 'bg-gray-200'"
+              class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
+              role="switch"
+              [attr.aria-checked]="config.enabled"
+            >
+              <span
+                [class]="config.enabled ? 'translate-x-5' : 'translate-x-0'"
+                class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
+              ></span>
+            </button>
+          </div>
+          <!-- Login Journey Name -->
+          <div>
+            <label for="loginJourneyName" class="block text-sm font-medium text-gray-700">Login Journey Name</label>
+            <input
+              type="text"
+              id="loginJourneyName"
+              [(ngModel)]="config.loginJourneyName"
+              (ngModelChange)="onConfigChange()"
+              placeholder="default-login"
+              [disabled]="!config.enabled"
+              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm disabled:bg-gray-100 disabled:text-gray-500"
+            />
+            <p class="mt-2 text-sm text-gray-500">
+              Journey to use for SAML SSO authentication. Leave empty to use the standalone login page at
+              <code class="text-xs bg-gray-100 px-1 py-0.5 rounded">/account/login</code>.
+            </p>
+          </div>
+          <!-- Info Box -->
+          <div class="bg-blue-50 border border-blue-200 rounded-lg p-4">
+            <div class="flex">
+              <ui-icon name="information-circle" class="h-5 w-5 text-blue-500 flex-shrink-0" />
+              <div class="ml-3">
+                <h4 class="text-sm font-medium text-blue-800">How SAML IdP Authentication Works</h4>
+                <p class="mt-1 text-sm text-blue-700">
+                  When a Service Provider sends an authentication request, users will be redirected to
+                  the configured login journey (or the standalone login page if not specified). After
+                  authentication, users are returned to the Service Provider with a SAML assertion.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <!-- IdP Endpoints Info - Only show when enabled and info available -->
+        @if (config.enabled && idpInfo()) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Endpoints</h3>
+              <p class="mt-1 text-sm text-gray-500">Share these URLs with Service Providers to configure SSO</p>
+            </div>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata URL:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.metadataUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.metadataUrl || '', 'metadata')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'metadata' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.singleSignOnServiceUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleSignOnServiceUrl || '', 'sso')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'sso' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SLO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.singleLogoutServiceUrl }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.singleLogoutServiceUrl || '', 'slo')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'slo' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Entity ID:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">{{ idpInfo()?.entityId }}</code>
+                </div>
+                <button (click)="copyToClipboard(idpInfo()?.entityId || '', 'entity')" class="ml-4 text-sm text-primary-600 hover:text-primary-700">
+                  {{ copied() === 'entity' ? 'Copied!' : 'Copy' }}
+                </button>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- Endpoints Preview - Show when enabled but IdP info not available -->
+        @if (config.enabled && !idpInfo()) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Endpoints</h3>
+              <p class="mt-1 text-sm text-gray-500">These endpoints will be available once SAML IdP is enabled</p>
+            </div>
+            <div class="space-y-3">
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">Metadata:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/metadata</code>
+                </div>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SSO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/sso</code>
+                </div>
+              </div>
+              <div class="flex items-center justify-between">
+                <div class="flex-1 min-w-0">
+                  <span class="text-sm font-medium text-gray-500">SLO Endpoint:</span>
+                  <code class="ml-2 text-sm text-gray-900 bg-gray-100 px-2 py-1 rounded">/saml/idp/slo</code>
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        <!-- IdP Certificates - Show when enabled -->
+        @if (config.enabled) {
+          <div class="space-y-4">
+            <div>
+              <h3 class="text-lg font-medium text-gray-900">IdP Certificates</h3>
+              <p class="mt-1 text-sm text-gray-500">Configure certificates for signing SAML assertions and decrypting requests</p>
+            </div>
+            <!-- Signing Certificate -->
+            <div class="bg-gray-50 rounded-lg p-4 space-y-3">
+              <div class="flex items-start justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="shield-check" class="h-5 w-5 text-gray-400" />
+                    <h4 class="text-sm font-medium text-gray-900">Signing Certificate</h4>
+                    @if (signingCert()) {
+                      <span [class]="getSourceBadgeClass(signingCert()?.source || '')" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium">
+                        {{ getSourceBadgeText(signingCert()?.source || '') }}
+                      </span>
+                    }
+                  </div>
+                  <p class="text-sm text-gray-500 mt-1">Used to sign SAML assertions sent to Service Providers</p>
+                </div>
+              </div>
+              @if (signingCert()?.hasCertificate) {
+                <div [class]="signingCert()?.isRevoked ? 'bg-red-50 rounded border border-red-300 p-3 space-y-2' : 'bg-white rounded border border-gray-200 p-3 space-y-2'">
+                  @if (signingCert()?.isRevoked) {
+                    <div class="flex items-center gap-2 text-red-700 bg-red-100 rounded px-2 py-1 mb-2">
+                      <ui-icon name="warning" class="h-4 w-4" />
+                      <span class="text-sm font-medium">Certificate Revoked - Please generate a new certificate</span>
+                    </div>
+                  }
+                  <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+                    <div>
+                      <span class="text-gray-500">Subject:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ signingCert()?.subject || 'N/A' }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Thumbprint:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ truncateThumbprint(signingCert()?.thumbprint) }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Valid From:</span>
+                      <span class="ml-2 text-gray-900">{{ formatDate(signingCert()?.notBefore) }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="text-gray-500">Valid Until:</span>
+                      <span [class]="signingCert()?.isRevoked ? 'text-red-600' : signingCert()?.isExpired ? 'text-red-600' : signingCert()?.isExpiringSoon ? 'text-yellow-600' : 'text-gray-900'" class="ml-2">
+                        {{ formatDate(signingCert()?.notAfter) }}
+                      </span>
+                      @if (signingCert()?.isRevoked) {
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Revoked</span>
+                      }
+                      @if (!signingCert()?.isRevoked && signingCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-red-500" />
+                      }
+                      @if (!signingCert()?.isRevoked && signingCert()?.isExpiringSoon && !signingCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-yellow-500" />
+                      }
+                    </div>
+                  </div>
+                </div>
+              } @else {
+                <div class="text-sm text-gray-500 italic">No certificate configured. Using global certificate.</div>
+              }
+              <!-- Action buttons -->
+              <div class="flex items-center gap-2 pt-2">
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="generateSigningCert()">
+                  @if (certLoading() === 'signing') {
+                    <svg class="h-4 w-4 mr-1.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  } @else {
+                    <ui-icon name="refresh" class="h-4 w-4 mr-1.5" />
+                  }
+                  Generate New
+                </ui-button>
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="toggleSigningUpload()">
+                  <ui-icon name="arrow-up-tray" class="h-4 w-4 mr-1.5" />
+                  Upload PFX
+                </ui-button>
+                @if (signingCert()?.source !== 'Global') {
+                  <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'signing'" (clicked)="resetSigningCert()">
+                    Reset to Global
+                  </ui-button>
+                }
+              </div>
+              <!-- Upload form for signing cert -->
+              @if (showSigningUpload()) {
+                <div class="bg-white rounded border border-gray-200 p-3 space-y-3">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">PFX Password (optional)</label>
+                    <input
+                      type="password"
+                      [(ngModel)]="signingPassword"
+                      placeholder="Enter password if PFX is protected"
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">Select PFX File</label>
+                    <input
+                      type="file"
+                      accept=".pfx,.p12"
+                      (change)="onSigningFileSelect($event)"
+                      [disabled]="certLoading() === 'signing'"
+                      class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    (click)="toggleSigningUpload()"
+                    class="text-sm text-gray-500 hover:text-gray-700"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              }
+            </div>
+            <!-- Encryption Certificate -->
+            <div class="bg-gray-50 rounded-lg p-4 space-y-3">
+              <div class="flex items-start justify-between">
+                <div>
+                  <div class="flex items-center gap-2">
+                    <ui-icon name="shield-check" class="h-5 w-5 text-gray-400" />
+                    <h4 class="text-sm font-medium text-gray-900">Encryption Certificate</h4>
+                    @if (encryptionCert()) {
+                      <span [class]="getSourceBadgeClass(encryptionCert()?.source || '')" class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium">
+                        {{ getSourceBadgeText(encryptionCert()?.source || '') }}
+                      </span>
+                    }
+                  </div>
+                  <p class="text-sm text-gray-500 mt-1">Used to decrypt incoming encrypted SAML requests (optional)</p>
+                </div>
+              </div>
+              @if (encryptionCert()?.hasCertificate) {
+                <div [class]="encryptionCert()?.isRevoked ? 'bg-red-50 rounded border border-red-300 p-3 space-y-2' : 'bg-white rounded border border-gray-200 p-3 space-y-2'">
+                  @if (encryptionCert()?.isRevoked) {
+                    <div class="flex items-center gap-2 text-red-700 bg-red-100 rounded px-2 py-1 mb-2">
+                      <ui-icon name="warning" class="h-4 w-4" />
+                      <span class="text-sm font-medium">Certificate Revoked - Please generate a new certificate</span>
+                    </div>
+                  }
+                  <div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
+                    <div>
+                      <span class="text-gray-500">Subject:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ encryptionCert()?.subject || 'N/A' }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Thumbprint:</span>
+                      <span class="ml-2 text-gray-900 font-mono text-xs">{{ truncateThumbprint(encryptionCert()?.thumbprint) }}</span>
+                    </div>
+                    <div>
+                      <span class="text-gray-500">Valid From:</span>
+                      <span class="ml-2 text-gray-900">{{ formatDate(encryptionCert()?.notBefore) }}</span>
+                    </div>
+                    <div class="flex items-center gap-2">
+                      <span class="text-gray-500">Valid Until:</span>
+                      <span [class]="encryptionCert()?.isRevoked ? 'text-red-600' : encryptionCert()?.isExpired ? 'text-red-600' : encryptionCert()?.isExpiringSoon ? 'text-yellow-600' : 'text-gray-900'" class="ml-2">
+                        {{ formatDate(encryptionCert()?.notAfter) }}
+                      </span>
+                      @if (encryptionCert()?.isRevoked) {
+                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Revoked</span>
+                      }
+                      @if (!encryptionCert()?.isRevoked && encryptionCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-red-500" />
+                      }
+                      @if (!encryptionCert()?.isRevoked && encryptionCert()?.isExpiringSoon && !encryptionCert()?.isExpired) {
+                        <ui-icon name="warning" class="h-4 w-4 text-yellow-500" />
+                      }
+                    </div>
+                  </div>
+                </div>
+              } @else {
+                <div class="text-sm text-gray-500 italic">No certificate configured. Using global certificate.</div>
+              }
+              <!-- Action buttons -->
+              <div class="flex items-center gap-2 pt-2">
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="generateEncryptionCert()">
+                  @if (certLoading() === 'encryption') {
+                    <svg class="h-4 w-4 mr-1.5 animate-spin" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+                    </svg>
+                  } @else {
+                    <ui-icon name="refresh" class="h-4 w-4 mr-1.5" />
+                  }
+                  Generate New
+                </ui-button>
+                <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="toggleEncryptionUpload()">
+                  <ui-icon name="arrow-up-tray" class="h-4 w-4 mr-1.5" />
+                  Upload PFX
+                </ui-button>
+                @if (encryptionCert()?.source !== 'Global') {
+                  <ui-button variant="secondary" size="sm" [disabled]="certLoading() === 'encryption'" (clicked)="resetEncryptionCert()">
+                    Reset to Global
+                  </ui-button>
+                }
+              </div>
+              <!-- Upload form for encryption cert -->
+              @if (showEncryptionUpload()) {
+                <div class="bg-white rounded border border-gray-200 p-3 space-y-3">
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">PFX Password (optional)</label>
+                    <input
+                      type="password"
+                      [(ngModel)]="encryptionPassword"
+                      placeholder="Enter password if PFX is protected"
+                      class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm"
+                    />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-medium text-gray-700">Select PFX File</label>
+                    <input
+                      type="file"
+                      accept=".pfx,.p12"
+                      (change)="onEncryptionFileSelect($event)"
+                      [disabled]="certLoading() === 'encryption'"
+                      class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100"
+                    />
+                  </div>
+                  <button
+                    type="button"
+                    (click)="toggleEncryptionUpload()"
+                    class="text-sm text-gray-500 hover:text-gray-700"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              }
+            </div>
+          </div>
+        }
+        <!-- Save Button -->
+        <div class="flex justify-end items-center gap-4 pt-4 border-t border-gray-200">
+          @if (hasChanges()) {
+            <span class="text-sm text-gray-500">You have unsaved changes</span>
+          }
+          <ui-button [disabled]="!hasChanges() || saving()" (clicked)="handleSave()">
+            {{ saving() ? 'Saving...' : 'Save Settings' }}
+          </ui-button>
+        </div>
+      }
+    </div>
+  `,
+                }]
+        }] });
+const SAML_ROUTES = [
+    {
+        path: '',
+        redirectTo: 'dashboard',
+        pathMatch: 'full',
+    },
+    {
+        path: 'dashboard',
+        component: SamlDashboardComponent,
+    },
+    {
+        path: 'service-providers',
+        component: ServiceProvidersPageComponent,
+    },
+    {
+        path: 'service-providers/new',
+        component: ServiceProviderDetailsPageComponent,
+    },
+    {
+        path: 'service-providers/:id',
+        component: ServiceProviderDetailsPageComponent,
+    },
+];
+/**
+ * SAML Admin Plugin
+ *
+ * Provides SAML Identity Provider management functionality:
+ * - Dashboard with IdP info and stats
+ * - Service Provider management (CRUD)
+ * - Settings tab for IdP configuration
+ */
+const SAML_PLUGIN = {
+    name: 'oluso-saml',
+    version: '1.0.0',
+    // Plugin routes - will be automatically added under /saml path
+    routes: [
+        {
+            path: 'saml',
+            children: SAML_ROUTES,
+        },
+    ],
+    navItems: [
+        {
+            id: 'saml',
+            label: 'SAML',
+            path: '/saml',
+            icon: 'shield-check',
+            order: 10,
+            mergeIntoPath: '/identity-providers',
+            children: [
+                { label: 'SAML Dashboard', path: '/saml/dashboard', icon: 'shield-check', permission: 'saml.read', order: 10 },
+                { label: 'Service Providers', path: '/saml/service-providers', icon: 'shield-check', permission: 'saml.read', order: 20 },
+            ],
+        },
+    ],
+    settingsTabs: [
+        {
+            id: 'saml-idp',
+            label: 'SAML IdP',
+            icon: 'shield-check',
+            component: SamlIdpSettingsTabComponent,
+            order: 400,
+        },
+    ],
+};
+/**
+ * Helper function to get SAML navigation items
+ */
+function getSamlNavItems() {
+    return SAML_PLUGIN.navItems ?? [];
+}
+// Models
+/**
+ * Generated bundle index. Do not edit.
+ */
+export { NAME_ID_FORMATS, SAML_PLUGIN, SAML_ROUTES, SSO_BINDINGS, SamlDashboardComponent, SamlIdpSettingsTabComponent, SamlService, ServiceProviderDetailsPageComponent, ServiceProvidersPageComponent, getSamlNavItems };
+//# sourceMappingURL=syndew-oluso-plugin-saml.mjs.map