var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
    var _, done = false;
    for (var i = decorators.length - 1; i >= 0; i--) {
        var context = {};
        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
        if (kind === "accessor") {
            if (result === void 0) continue;
            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
            if (_ = accept(result.get)) descriptor.get = _;
            if (_ = accept(result.set)) descriptor.set = _;
            if (_ = accept(result.init)) initializers.unshift(_);
        }
        else if (_ = accept(result)) {
            if (kind === "field") initializers.unshift(_);
            else descriptor[key] = _;
        }
    }
    if (target) Object.defineProperty(target, contextIn.name, descriptor);
    done = true;
};
var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
    var useValue = arguments.length > 2;
    for (var i = 0; i < initializers.length; i++) {
        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
    }
    return useValue ? value : void 0;
};
import { DeesElement, customElement, html, css, cssManager, property, } from '@design.estate/dees-element';
function formatPorts(ports) {
    if (typeof ports === 'number')
        return String(ports);
    if (Array.isArray(ports)) {
        return ports
            .map((p) => {
            if (typeof p === 'number')
                return String(p);
            return `${p.from}\u2013${p.to}`;
        })
            .join(', ');
    }
    return String(ports);
}
function formatTargets(targets) {
    const result = [];
    for (const t of targets) {
        const hosts = Array.isArray(t.host) ? t.host : [t.host];
        const portStr = t.port === 'preserve' ? '(preserve)' : String(t.port);
        for (const h of hosts) {
            result.push(`${h}:${portStr}`);
        }
    }
    return result;
}
let SzRouteCard = (() => {
    let _classDecorators = [customElement('sz-route-card')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _route_decorators;
    let _route_initializers = [];
    let _route_extraInitializers = [];
    let _showActions_decorators;
    let _showActions_initializers = [];
    let _showActions_extraInitializers = [];
    var SzRouteCard = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _route_decorators = [property({ type: Object })];
            _showActions_decorators = [property({ type: Boolean })];
            __esDecorate(this, null, _route_decorators, { kind: "accessor", name: "route", static: false, private: false, access: { has: obj => "route" in obj, get: obj => obj.route, set: (obj, value) => { obj.route = value; } }, metadata: _metadata }, _route_initializers, _route_extraInitializers);
            __esDecorate(this, null, _showActions_decorators, { kind: "accessor", name: "showActions", static: false, private: false, access: { has: obj => "showActions" in obj, get: obj => obj.showActions, set: (obj, value) => { obj.showActions = value; } }, metadata: _metadata }, _showActions_initializers, _showActions_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            SzRouteCard = _classThis = _classDescriptor.value;
            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
        }
        static demo = () => html `
    <div style="padding: 24px; max-width: 520px;">
      <sz-route-card
        .route=${{
            name: 'API Gateway',
            description: 'Main API gateway with TLS termination and load balancing',
            enabled: true,
            priority: 10,
            tags: ['web', 'api', 'production'],
            match: {
                ports: [443, 8443],
                domains: ['api.example.com', '*.api.serve.zone'],
                path: '/api/*',
                protocol: 'http',
                clientIp: ['10.0.0.0/8'],
            },
            action: {
                type: 'forward',
                targets: [
                    { host: ['10.0.0.1', '10.0.0.2'], port: 8080 },
                ],
                tls: { mode: 'terminate', certificate: 'auto' },
                websocket: { enabled: true },
                loadBalancing: { algorithm: 'round-robin' },
                forwardingEngine: 'nftables',
            },
            security: {
                ipAllowList: ['10.0.0.0/8'],
                ipBlockList: ['192.168.100.0/24'],
                rateLimit: { enabled: true, maxRequests: 100, window: 60 },
                maxConnections: 1000,
            },
            vpnOnly: true,
            metadata: {
                sourceProfileName: 'STANDARD',
                networkTargetName: 'LOSSLESS_INFRA',
            },
        }}
      ></sz-route-card>
    </div>
  `;
        static demoGroups = ['Routes'];
        #route_accessor_storage = __runInitializers(this, _route_initializers, null);
        get route() { return this.#route_accessor_storage; }
        set route(value) { this.#route_accessor_storage = value; }
        #showActions_accessor_storage = (__runInitializers(this, _route_extraInitializers), __runInitializers(this, _showActions_initializers, false));
        get showActions() { return this.#showActions_accessor_storage; }
        set showActions(value) { this.#showActions_accessor_storage = value; }
        static styles = [
            cssManager.defaultStyles,
            css `
      :host {
        display: block;
      }

      dees-tile::part(outer) {
        transition: border-color 200ms ease, box-shadow 200ms ease;
      }

      dees-tile:hover::part(outer) {
        border-color: var(--dees-color-border-strong);
        box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
      }

      /* Header */
      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: 40px;
        padding: 0 16px;
        width: 100%;
        box-sizing: border-box;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
      }

      .status-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .status-dot.enabled {
        background: ${cssManager.bdTheme('#22c55e', '#22c55e')};
        box-shadow: 0 0 6px ${cssManager.bdTheme('rgba(34,197,94,0.4)', 'rgba(34,197,94,0.3)')};
      }

      .status-dot.disabled {
        background: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
      }

      .route-name {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.01em;
        color: var(--dees-color-text-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .header-badges {
        display: flex;
        gap: 6px;
        flex-shrink: 0;
      }

      .badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
      }

      .badge.forward {
        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .badge.socket-handler {
        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.2)')};
        color: ${cssManager.bdTheme('#7c3aed', '#a78bfa')};
      }

      .badge.enabled {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .badge.disabled {
        background: ${cssManager.bdTheme('#f4f4f5', 'rgba(113, 113, 122, 0.2)')};
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .card-body {
        padding: 16px 20px;
      }

      .description {
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-bottom: 8px;
        line-height: 1.4;
      }

      .meta-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 16px;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
      }

      .tag {
        padding: 2px 8px;
        background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
      }

      .priority {
        font-size: 11px;
        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
        font-weight: 500;
      }

      /* Sections */
      .section {
        border-left: 3px solid;
        padding: 10px 14px;
        margin-bottom: 12px;
        border-radius: 0 6px 6px 0;
        background: ${cssManager.bdTheme('#fafafa', '#101010')};
      }

      .section:last-of-type {
        margin-bottom: 0;
      }

      .section.match {
        border-left-color: ${cssManager.bdTheme('#3b82f6', '#3b82f6')};
      }

      .section.action {
        border-left-color: ${cssManager.bdTheme('#22c55e', '#22c55e')};
      }

      .section.security {
        border-left-color: ${cssManager.bdTheme('#f59e0b', '#f59e0b')};
      }

      .section.linked {
        border-left-color: ${cssManager.bdTheme('#8b5cf6', '#8b5cf6')};
      }

      .linked-name {
        display: inline-flex;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 600;
        font-family: monospace;
        background: ${cssManager.bdTheme('#ede9fe', 'rgba(139, 92, 246, 0.15)')};
        color: ${cssManager.bdTheme('#6d28d9', '#a78bfa')};
      }

      .section-label {
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: ${cssManager.bdTheme('#a1a1aa', '#71717a')};
        margin-bottom: 8px;
      }

      .field-row {
        display: flex;
        gap: 8px;
        margin-bottom: 5px;
        font-size: 13px;
        line-height: 1.5;
      }

      .field-row:last-child {
        margin-bottom: 0;
      }

      .field-key {
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        min-width: 64px;
        flex-shrink: 0;
        font-weight: 500;
      }

      .field-value {
        color: ${cssManager.bdTheme('#18181b', '#e4e4e7')};
        word-break: break-all;
      }

      .domain-chip {
        display: inline-flex;
        padding: 1px 6px;
        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
        border-radius: 3px;
        font-size: 12px;
        margin-right: 4px;
        margin-bottom: 2px;
        font-family: monospace;
      }

      .domain-chip.glob {
        background: ${cssManager.bdTheme('#fef3c7', 'rgba(245, 158, 11, 0.15)')};
        color: ${cssManager.bdTheme('#92400e', '#fbbf24')};
      }

      .mono {
        font-family: monospace;
        font-size: 12px;
      }

      .protocol-badge {
        display: inline-flex;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500;
      }

      .protocol-badge.http {
        background: ${cssManager.bdTheme('#dbeafe', 'rgba(59, 130, 246, 0.2)')};
        color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
      }

      .protocol-badge.tcp {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .tls-badge {
        display: inline-flex;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500;
      }

      .tls-badge.auto {
        background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
        color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
      }

      .tls-badge.custom {
        background: ${cssManager.bdTheme('#ffedd5', 'rgba(249, 115, 22, 0.2)')};
        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
      }

      .engine-badge {
        display: inline-flex;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: 500;
        background: ${cssManager.bdTheme('#fae8ff', 'rgba(168, 85, 247, 0.2)')};
        color: ${cssManager.bdTheme('#7e22ce', '#c084fc')};
      }

      .header-pair {
        display: inline;
        font-family: monospace;
        font-size: 12px;
      }

      /* Feature icons */
      .features-row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
      }

      .feature {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 11px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .feature-icon {
        font-size: 13px;
      }

      .no-route {
        text-align: center;
        padding: 24px;
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
        font-size: 13px;
      }

      .section.vpn {
        border-left-color: ${cssManager.bdTheme('#0891b2', '#06b6d4')};
      }

      .vpn-badge {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: 9999px;
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
      }

      .vpn-badge.mandatory {
        background: ${cssManager.bdTheme('#fff7ed', 'rgba(249, 115, 22, 0.2)')};
        color: ${cssManager.bdTheme('#c2410c', '#fb923c')};
      }

      .vpn-badge.optional {
        background: ${cssManager.bdTheme('#ecfdf5', 'rgba(16, 185, 129, 0.2)')};
        color: ${cssManager.bdTheme('#047857', '#34d399')};
      }

      .vpn-tag {
        display: inline-flex;
        padding: 1px 6px;
        border-radius: 3px;
        font-size: 12px;
        font-weight: 600;
        font-family: monospace;
        margin-right: 4px;
        margin-bottom: 2px;
        background: ${cssManager.bdTheme('#ecfeff', 'rgba(6, 182, 212, 0.15)')};
        color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
      }

      .card-footer {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
        height: 36px;
        width: 100%;
        box-sizing: border-box;
      }

      .tile-button {
        padding: 0 16px;
        height: 100%;
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
        background: transparent;
        border: none;
        border-left: 1px solid var(--dees-color-border-subtle);
        color: var(--dees-color-text-muted);
        white-space: nowrap;
        display: flex;
        align-items: center;
        gap: 6px;
        font-family: inherit;
      }

      .tile-button:first-child {
        border-left: none;
      }

      .tile-button:hover {
        background: var(--dees-color-hover);
        color: var(--dees-color-text-primary);
      }

      .tile-button.edit:hover {
        color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
      }

      .tile-button.delete:hover {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
      }
    `,
        ];
        render() {
            if (!this.route) {
                return html `
        <dees-tile>
          <div class="card-body"><div class="no-route">No route data</div></div>
        </dees-tile>
      `;
            }
            const r = this.route;
            const isEnabled = r.enabled !== false;
            const match = r.match;
            const action = r.action;
            const security = r.security;
            return html `
      <dees-tile>
        <!-- Header -->
        <div slot="header" class="header">
          <div class="header-left">
            <span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
            <span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
          </div>
          <div class="header-badges">
            <span class="badge ${action.type}">${action.type}</span>
            <span class="badge ${isEnabled ? 'enabled' : 'disabled'}">${isEnabled ? 'enabled' : 'disabled'}</span>
          </div>
        </div>

        <div class="card-body">
          ${r.description ? html `<div class="description">${r.description}</div>` : ''}

          <div class="meta-row">
            ${r.tags && r.tags.length > 0
                ? html `<div class="tags">${r.tags.map((t) => html `<span class="tag">${t}</span>`)}</div>`
                : html `<div></div>`}
            ${r.priority != null ? html `<span class="priority">Priority: ${r.priority}</span>` : ''}
          </div>

          <!-- Match Section -->
        <div class="section match">
          <div class="section-label">Match</div>
          <div class="field-row">
            <span class="field-key">Ports</span>
            <span class="field-value mono">${formatPorts(match.ports)}</span>
          </div>
          ${match.domains
                ? html `
                <div class="field-row">
                  <span class="field-key">Domains</span>
                  <span class="field-value">${this.renderDomains(match.domains)}</span>
                </div>
              `
                : ''}
          ${match.path
                ? html `
                <div class="field-row">
                  <span class="field-key">Path</span>
                  <span class="field-value mono">${match.path}</span>
                </div>
              `
                : ''}
          ${match.protocol
                ? html `
                <div class="field-row">
                  <span class="field-key">Protocol</span>
                  <span class="field-value">
                    <span class="protocol-badge ${match.protocol}">${match.protocol}</span>
                  </span>
                </div>
              `
                : ''}
          ${match.clientIp && match.clientIp.length > 0
                ? html `
                <div class="field-row">
                  <span class="field-key">Client</span>
                  <span class="field-value mono">${match.clientIp.join(', ')}</span>
                </div>
              `
                : ''}
          ${match.tlsVersion && match.tlsVersion.length > 0
                ? html `
                <div class="field-row">
                  <span class="field-key">TLS Ver</span>
                  <span class="field-value">${match.tlsVersion.join(', ')}</span>
                </div>
              `
                : ''}
          ${match.headers
                ? html `
                <div class="field-row">
                  <span class="field-key">Headers</span>
                  <span class="field-value">
                    ${Object.entries(match.headers).map(([k, v]) => html `<span class="header-pair">${k}=${v}</span> `)}
                  </span>
                </div>
              `
                : ''}
        </div>

        <!-- Action Section -->
        <div class="section action">
          <div class="section-label">Action</div>
          ${action.targets && action.targets.length > 0
                ? html `
                <div class="field-row">
                  <span class="field-key">Targets</span>
                  <span class="field-value mono">${formatTargets(action.targets).join(', ')}</span>
                </div>
              `
                : ''}
          ${action.tls
                ? html `
                <div class="field-row">
                  <span class="field-key">TLS</span>
                  <span class="field-value">
                    ${action.tls.mode}
                    ${action.tls.certificate
                    ? action.tls.certificate === 'auto'
                        ? html ` <span class="tls-badge auto">auto cert</span>`
                        : html ` <span class="tls-badge custom">custom cert</span>`
                    : ''}
                  </span>
                </div>
              `
                : ''}
          ${action.forwardingEngine
                ? html `
                <div class="field-row">
                  <span class="field-key">Engine</span>
                  <span class="field-value"><span class="engine-badge">${action.forwardingEngine}</span></span>
                </div>
              `
                : ''}
          ${action.loadBalancing
                ? html `
                <div class="field-row">
                  <span class="field-key">LB</span>
                  <span class="field-value">${action.loadBalancing.algorithm}</span>
                </div>
              `
                : ''}
          ${action.websocket?.enabled
                ? html `
                <div class="field-row">
                  <span class="field-key">WS</span>
                  <span class="field-value"><span class="badge enabled">enabled</span></span>
                </div>
              `
                : ''}
        </div>

        <!-- Security Section -->
        ${security
                ? html `
              <div class="section security">
                <div class="section-label">Security</div>
                ${security.ipAllowList && security.ipAllowList.length > 0
                    ? html `
                      <div class="field-row">
                        <span class="field-key">Allow</span>
                        <span class="field-value mono">${security.ipAllowList.join(', ')}</span>
                      </div>
                    `
                    : ''}
                ${security.ipBlockList && security.ipBlockList.length > 0
                    ? html `
                      <div class="field-row">
                        <span class="field-key">Block</span>
                        <span class="field-value mono">${security.ipBlockList.join(', ')}</span>
                      </div>
                    `
                    : ''}
                ${security.rateLimit?.enabled
                    ? html `
                      <div class="field-row">
                        <span class="field-key">Rate</span>
                        <span class="field-value">${security.rateLimit.maxRequests} req / ${security.rateLimit.window}s</span>
                      </div>
                    `
                    : ''}
                ${security.maxConnections
                    ? html `
                      <div class="field-row">
                        <span class="field-key">Max Conn</span>
                        <span class="field-value">${security.maxConnections}</span>
                      </div>
                    `
                    : ''}
              </div>
            `
                : ''}

          <!-- VPN Section -->
          ${this.renderVpn()}

          <!-- Linked References Section -->
          ${this.renderLinked()}

          <!-- Feature Icons Row -->
          ${this.renderFeatures()}
        </div>

        <!-- Action Buttons -->
        ${this.showActions ? html `
          <div slot="footer" class="card-footer">
            <button class="tile-button edit" @click=${(e) => {
                e.stopPropagation();
                this.dispatchEvent(new CustomEvent('route-edit', {
                    detail: this.route,
                    bubbles: true,
                    composed: true,
                }));
            }}>Edit</button>
            <button class="tile-button delete" @click=${(e) => {
                e.stopPropagation();
                this.dispatchEvent(new CustomEvent('route-delete', {
                    detail: this.route,
                    bubbles: true,
                    composed: true,
                }));
            }}>Delete</button>
          </div>
        ` : ''}
      </dees-tile>
    `;
        }
        renderDomains(domains) {
            const list = Array.isArray(domains) ? domains : [domains];
            return html `${list.map((d) => html `<span class="domain-chip ${d.includes('*') ? 'glob' : ''}">${d}</span>`)}`;
        }
        renderVpn() {
            if (!this.route?.vpnOnly)
                return html ``;
            return html `
      <div class="section vpn">
        <div class="section-label">VPN Access</div>
        <div class="field-row">
          <span class="field-key">Mode</span>
          <span class="field-value">
            <span class="vpn-badge mandatory">VPN Only</span>
          </span>
        </div>
      </div>
    `;
        }
        renderLinked() {
            const meta = this.route?.metadata;
            if (!meta)
                return html ``;
            const hasProfile = !!meta.sourceProfileName;
            const hasTarget = !!meta.networkTargetName;
            if (!hasProfile && !hasTarget)
                return html ``;
            return html `
      <div class="section linked">
        <div class="section-label">Linked</div>
        ${hasProfile
                ? html `
              <div class="field-row">
                <span class="field-key">Profile</span>
                <span class="field-value"><span class="linked-name">${meta.sourceProfileName}</span></span>
              </div>
            `
                : ''}
        ${hasTarget
                ? html `
              <div class="field-row">
                <span class="field-key">Target</span>
                <span class="field-value"><span class="linked-name">${meta.networkTargetName}</span></span>
              </div>
            `
                : ''}
      </div>
    `;
        }
        renderFeatures() {
            if (!this.route)
                return html ``;
            const features = [];
            const action = this.route.action;
            const security = this.route.security;
            const headers = this.route.headers;
            const meta = this.route.metadata;
            if (action.tls) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x1f512;</span>TLS</span>`);
            }
            if (action.websocket?.enabled) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x2194;</span>WS</span>`);
            }
            if (action.loadBalancing) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x2696;</span>LB</span>`);
            }
            if (security) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x1f6e1;</span>Security</span>`);
            }
            if (headers) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x2699;</span>Headers</span>`);
            }
            if (this.route?.vpnOnly) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x1f510;</span>VPN</span>`);
            }
            if (meta?.sourceProfileName || meta?.networkTargetName) {
                features.push(html `<span class="feature"><span class="feature-icon">&#x1f517;</span>Linked</span>`);
            }
            if (features.length === 0)
                return html ``;
            return html `<div class="features-row">${features}</div>`;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _showActions_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return SzRouteCard = _classThis;
})();
export { SzRouteCard };
//# sourceMappingURL=data:application/json;base64, 