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, state, } from '@design.estate/dees-element';
let SzServiceCreateView = (() => {
    let _classDecorators = [customElement('sz-service-create-view')];
    let _classDescriptor;
    let _classExtraInitializers = [];
    let _classThis;
    let _classSuper = DeesElement;
    let _registries_decorators;
    let _registries_initializers = [];
    let _registries_extraInitializers = [];
    let _loading_decorators;
    let _loading_initializers = [];
    let _loading_extraInitializers = [];
    let _serviceName_decorators;
    let _serviceName_initializers = [];
    let _serviceName_extraInitializers = [];
    let _imageUrl_decorators;
    let _imageUrl_initializers = [];
    let _imageUrl_extraInitializers = [];
    let _selectedRegistry_decorators;
    let _selectedRegistry_initializers = [];
    let _selectedRegistry_extraInitializers = [];
    let _ports_decorators;
    let _ports_initializers = [];
    let _ports_extraInitializers = [];
    let _envVars_decorators;
    let _envVars_initializers = [];
    let _envVars_extraInitializers = [];
    let _volumes_decorators;
    let _volumes_initializers = [];
    let _volumes_extraInitializers = [];
    let _cpuLimit_decorators;
    let _cpuLimit_initializers = [];
    let _cpuLimit_extraInitializers = [];
    let _memoryLimit_decorators;
    let _memoryLimit_initializers = [];
    let _memoryLimit_extraInitializers = [];
    let _restartPolicy_decorators;
    let _restartPolicy_initializers = [];
    let _restartPolicy_extraInitializers = [];
    let _networkMode_decorators;
    let _networkMode_initializers = [];
    let _networkMode_extraInitializers = [];
    let _showAdvanced_decorators;
    let _showAdvanced_initializers = [];
    let _showAdvanced_extraInitializers = [];
    let _enableMongoDB_decorators;
    let _enableMongoDB_initializers = [];
    let _enableMongoDB_extraInitializers = [];
    let _enableS3_decorators;
    let _enableS3_initializers = [];
    let _enableS3_extraInitializers = [];
    let _enableClickHouse_decorators;
    let _enableClickHouse_initializers = [];
    let _enableClickHouse_extraInitializers = [];
    var SzServiceCreateView = class extends _classSuper {
        static { _classThis = this; }
        static {
            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
            _registries_decorators = [property({ type: Array })];
            _loading_decorators = [property({ type: Boolean })];
            _serviceName_decorators = [state()];
            _imageUrl_decorators = [state()];
            _selectedRegistry_decorators = [state()];
            _ports_decorators = [state()];
            _envVars_decorators = [state()];
            _volumes_decorators = [state()];
            _cpuLimit_decorators = [state()];
            _memoryLimit_decorators = [state()];
            _restartPolicy_decorators = [state()];
            _networkMode_decorators = [state()];
            _showAdvanced_decorators = [state()];
            _enableMongoDB_decorators = [state()];
            _enableS3_decorators = [state()];
            _enableClickHouse_decorators = [state()];
            __esDecorate(this, null, _registries_decorators, { kind: "accessor", name: "registries", static: false, private: false, access: { has: obj => "registries" in obj, get: obj => obj.registries, set: (obj, value) => { obj.registries = value; } }, metadata: _metadata }, _registries_initializers, _registries_extraInitializers);
            __esDecorate(this, null, _loading_decorators, { kind: "accessor", name: "loading", static: false, private: false, access: { has: obj => "loading" in obj, get: obj => obj.loading, set: (obj, value) => { obj.loading = value; } }, metadata: _metadata }, _loading_initializers, _loading_extraInitializers);
            __esDecorate(this, null, _serviceName_decorators, { kind: "accessor", name: "serviceName", static: false, private: false, access: { has: obj => "serviceName" in obj, get: obj => obj.serviceName, set: (obj, value) => { obj.serviceName = value; } }, metadata: _metadata }, _serviceName_initializers, _serviceName_extraInitializers);
            __esDecorate(this, null, _imageUrl_decorators, { kind: "accessor", name: "imageUrl", static: false, private: false, access: { has: obj => "imageUrl" in obj, get: obj => obj.imageUrl, set: (obj, value) => { obj.imageUrl = value; } }, metadata: _metadata }, _imageUrl_initializers, _imageUrl_extraInitializers);
            __esDecorate(this, null, _selectedRegistry_decorators, { kind: "accessor", name: "selectedRegistry", static: false, private: false, access: { has: obj => "selectedRegistry" in obj, get: obj => obj.selectedRegistry, set: (obj, value) => { obj.selectedRegistry = value; } }, metadata: _metadata }, _selectedRegistry_initializers, _selectedRegistry_extraInitializers);
            __esDecorate(this, null, _ports_decorators, { kind: "accessor", name: "ports", static: false, private: false, access: { has: obj => "ports" in obj, get: obj => obj.ports, set: (obj, value) => { obj.ports = value; } }, metadata: _metadata }, _ports_initializers, _ports_extraInitializers);
            __esDecorate(this, null, _envVars_decorators, { kind: "accessor", name: "envVars", static: false, private: false, access: { has: obj => "envVars" in obj, get: obj => obj.envVars, set: (obj, value) => { obj.envVars = value; } }, metadata: _metadata }, _envVars_initializers, _envVars_extraInitializers);
            __esDecorate(this, null, _volumes_decorators, { kind: "accessor", name: "volumes", static: false, private: false, access: { has: obj => "volumes" in obj, get: obj => obj.volumes, set: (obj, value) => { obj.volumes = value; } }, metadata: _metadata }, _volumes_initializers, _volumes_extraInitializers);
            __esDecorate(this, null, _cpuLimit_decorators, { kind: "accessor", name: "cpuLimit", static: false, private: false, access: { has: obj => "cpuLimit" in obj, get: obj => obj.cpuLimit, set: (obj, value) => { obj.cpuLimit = value; } }, metadata: _metadata }, _cpuLimit_initializers, _cpuLimit_extraInitializers);
            __esDecorate(this, null, _memoryLimit_decorators, { kind: "accessor", name: "memoryLimit", static: false, private: false, access: { has: obj => "memoryLimit" in obj, get: obj => obj.memoryLimit, set: (obj, value) => { obj.memoryLimit = value; } }, metadata: _metadata }, _memoryLimit_initializers, _memoryLimit_extraInitializers);
            __esDecorate(this, null, _restartPolicy_decorators, { kind: "accessor", name: "restartPolicy", static: false, private: false, access: { has: obj => "restartPolicy" in obj, get: obj => obj.restartPolicy, set: (obj, value) => { obj.restartPolicy = value; } }, metadata: _metadata }, _restartPolicy_initializers, _restartPolicy_extraInitializers);
            __esDecorate(this, null, _networkMode_decorators, { kind: "accessor", name: "networkMode", static: false, private: false, access: { has: obj => "networkMode" in obj, get: obj => obj.networkMode, set: (obj, value) => { obj.networkMode = value; } }, metadata: _metadata }, _networkMode_initializers, _networkMode_extraInitializers);
            __esDecorate(this, null, _showAdvanced_decorators, { kind: "accessor", name: "showAdvanced", static: false, private: false, access: { has: obj => "showAdvanced" in obj, get: obj => obj.showAdvanced, set: (obj, value) => { obj.showAdvanced = value; } }, metadata: _metadata }, _showAdvanced_initializers, _showAdvanced_extraInitializers);
            __esDecorate(this, null, _enableMongoDB_decorators, { kind: "accessor", name: "enableMongoDB", static: false, private: false, access: { has: obj => "enableMongoDB" in obj, get: obj => obj.enableMongoDB, set: (obj, value) => { obj.enableMongoDB = value; } }, metadata: _metadata }, _enableMongoDB_initializers, _enableMongoDB_extraInitializers);
            __esDecorate(this, null, _enableS3_decorators, { kind: "accessor", name: "enableS3", static: false, private: false, access: { has: obj => "enableS3" in obj, get: obj => obj.enableS3, set: (obj, value) => { obj.enableS3 = value; } }, metadata: _metadata }, _enableS3_initializers, _enableS3_extraInitializers);
            __esDecorate(this, null, _enableClickHouse_decorators, { kind: "accessor", name: "enableClickHouse", static: false, private: false, access: { has: obj => "enableClickHouse" in obj, get: obj => obj.enableClickHouse, set: (obj, value) => { obj.enableClickHouse = value; } }, metadata: _metadata }, _enableClickHouse_initializers, _enableClickHouse_extraInitializers);
            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
            SzServiceCreateView = _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: 800px;">
      <sz-service-create-view
        .registries=${[
            { id: '1', name: 'Onebox Registry', url: 'registry.onebox.local' },
            { id: '2', name: 'Docker Hub', url: 'docker.io' },
        ]}
      ></sz-service-create-view>
    </div>
  `;
        static demoGroups = ['Services'];
        #registries_accessor_storage = __runInitializers(this, _registries_initializers, []);
        get registries() { return this.#registries_accessor_storage; }
        set registries(value) { this.#registries_accessor_storage = value; }
        #loading_accessor_storage = (__runInitializers(this, _registries_extraInitializers), __runInitializers(this, _loading_initializers, false));
        get loading() { return this.#loading_accessor_storage; }
        set loading(value) { this.#loading_accessor_storage = value; }
        #serviceName_accessor_storage = (__runInitializers(this, _loading_extraInitializers), __runInitializers(this, _serviceName_initializers, ''));
        get serviceName() { return this.#serviceName_accessor_storage; }
        set serviceName(value) { this.#serviceName_accessor_storage = value; }
        #imageUrl_accessor_storage = (__runInitializers(this, _serviceName_extraInitializers), __runInitializers(this, _imageUrl_initializers, ''));
        get imageUrl() { return this.#imageUrl_accessor_storage; }
        set imageUrl(value) { this.#imageUrl_accessor_storage = value; }
        #selectedRegistry_accessor_storage = (__runInitializers(this, _imageUrl_extraInitializers), __runInitializers(this, _selectedRegistry_initializers, ''));
        get selectedRegistry() { return this.#selectedRegistry_accessor_storage; }
        set selectedRegistry(value) { this.#selectedRegistry_accessor_storage = value; }
        #ports_accessor_storage = (__runInitializers(this, _selectedRegistry_extraInitializers), __runInitializers(this, _ports_initializers, [{ hostPort: '', containerPort: '', protocol: 'tcp' }]));
        get ports() { return this.#ports_accessor_storage; }
        set ports(value) { this.#ports_accessor_storage = value; }
        #envVars_accessor_storage = (__runInitializers(this, _ports_extraInitializers), __runInitializers(this, _envVars_initializers, [{ key: '', value: '' }]));
        get envVars() { return this.#envVars_accessor_storage; }
        set envVars(value) { this.#envVars_accessor_storage = value; }
        #volumes_accessor_storage = (__runInitializers(this, _envVars_extraInitializers), __runInitializers(this, _volumes_initializers, []));
        get volumes() { return this.#volumes_accessor_storage; }
        set volumes(value) { this.#volumes_accessor_storage = value; }
        #cpuLimit_accessor_storage = (__runInitializers(this, _volumes_extraInitializers), __runInitializers(this, _cpuLimit_initializers, ''));
        get cpuLimit() { return this.#cpuLimit_accessor_storage; }
        set cpuLimit(value) { this.#cpuLimit_accessor_storage = value; }
        #memoryLimit_accessor_storage = (__runInitializers(this, _cpuLimit_extraInitializers), __runInitializers(this, _memoryLimit_initializers, ''));
        get memoryLimit() { return this.#memoryLimit_accessor_storage; }
        set memoryLimit(value) { this.#memoryLimit_accessor_storage = value; }
        #restartPolicy_accessor_storage = (__runInitializers(this, _memoryLimit_extraInitializers), __runInitializers(this, _restartPolicy_initializers, 'always'));
        get restartPolicy() { return this.#restartPolicy_accessor_storage; }
        set restartPolicy(value) { this.#restartPolicy_accessor_storage = value; }
        #networkMode_accessor_storage = (__runInitializers(this, _restartPolicy_extraInitializers), __runInitializers(this, _networkMode_initializers, 'bridge'));
        get networkMode() { return this.#networkMode_accessor_storage; }
        set networkMode(value) { this.#networkMode_accessor_storage = value; }
        #showAdvanced_accessor_storage = (__runInitializers(this, _networkMode_extraInitializers), __runInitializers(this, _showAdvanced_initializers, false));
        get showAdvanced() { return this.#showAdvanced_accessor_storage; }
        set showAdvanced(value) { this.#showAdvanced_accessor_storage = value; }
        #enableMongoDB_accessor_storage = (__runInitializers(this, _showAdvanced_extraInitializers), __runInitializers(this, _enableMongoDB_initializers, false));
        get enableMongoDB() { return this.#enableMongoDB_accessor_storage; }
        set enableMongoDB(value) { this.#enableMongoDB_accessor_storage = value; }
        #enableS3_accessor_storage = (__runInitializers(this, _enableMongoDB_extraInitializers), __runInitializers(this, _enableS3_initializers, false));
        get enableS3() { return this.#enableS3_accessor_storage; }
        set enableS3(value) { this.#enableS3_accessor_storage = value; }
        #enableClickHouse_accessor_storage = (__runInitializers(this, _enableS3_extraInitializers), __runInitializers(this, _enableClickHouse_initializers, false));
        get enableClickHouse() { return this.#enableClickHouse_accessor_storage; }
        set enableClickHouse(value) { this.#enableClickHouse_accessor_storage = value; }
        static styles = [
            cssManager.defaultStyles,
            css `
      :host {
        display: block;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
      }

      .header-title {
        font-size: 20px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .header-subtitle {
        font-size: 14px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-top: 4px;
      }

      .section {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 16px;
      }

      .section-title {
        font-size: 15px;
        font-weight: 600;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .section-title svg {
        width: 18px;
        height: 18px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 16px;
      }

      .form-row.single {
        grid-template-columns: 1fr;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .form-label {
        font-size: 13px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .form-label .required {
        color: ${cssManager.bdTheme('#ef4444', '#f87171')};
      }

      .form-hint {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
      }

      .form-input,
      .form-select {
        width: 100%;
        padding: 10px 12px;
        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        font-size: 14px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
        outline: none;
        transition: border-color 200ms ease;
        box-sizing: border-box;
      }

      .form-input:focus,
      .form-select:focus {
        border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .form-input::placeholder {
        color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
      }

      .form-select {
        cursor: pointer;
      }

      .dynamic-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .dynamic-row {
        display: flex;
        gap: 8px;
        align-items: flex-start;
      }

      .dynamic-row .form-input {
        flex: 1;
      }

      .dynamic-row .form-select {
        width: 80px;
        flex-shrink: 0;
      }

      .remove-button {
        padding: 10px;
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        transition: all 200ms ease;
        flex-shrink: 0;
      }

      .remove-button:hover {
        background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
        border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
        color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
      }

      .add-button {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 12px;
        background: transparent;
        border: 1px dashed ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        border-radius: 6px;
        font-size: 13px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        cursor: pointer;
        transition: all 200ms ease;
        margin-top: 8px;
      }

      .add-button:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        border-color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .add-button svg {
        width: 14px;
        height: 14px;
      }

      .toggle-advanced {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 0;
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
        cursor: pointer;
        background: none;
        border: none;
      }

      .toggle-advanced svg {
        width: 16px;
        height: 16px;
        transition: transform 200ms ease;
      }

      .toggle-advanced.open svg {
        transform: rotate(180deg);
      }

      .checkbox-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .checkbox {
        width: 18px;
        height: 18px;
        accent-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .platform-toggle-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
      }

      .platform-toggle-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
        border-radius: 8px;
        transition: background 200ms ease;
      }

      .platform-toggle-item:has(input:checked) {
        background: ${cssManager.bdTheme('#eff6ff', 'rgba(59, 130, 246, 0.1)')};
      }

      .platform-toggle-info {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .platform-toggle-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: ${cssManager.bdTheme('#ffffff', '#27272a')};
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .platform-toggle-icon svg {
        width: 20px;
        height: 20px;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .platform-toggle-name {
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .platform-toggle-desc {
        font-size: 12px;
        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
        margin-top: 2px;
      }

      .toggle-switch {
        position: relative;
        width: 44px;
        height: 24px;
        flex-shrink: 0;
      }

      .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
      }

      .toggle-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
        border-radius: 12px;
        transition: background 200ms ease;
      }

      .toggle-slider::before {
        content: '';
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: white;
        border-radius: 50%;
        transition: transform 200ms ease;
      }

      .toggle-switch input:checked + .toggle-slider {
        background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
      }

      .toggle-switch input:checked + .toggle-slider::before {
        transform: translateX(20px);
      }

      .actions {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
        padding-top: 16px;
        border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        margin-top: 8px;
      }

      .button {
        padding: 10px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: all 200ms ease;
        display: inline-flex;
        align-items: center;
        gap: 8px;
      }

      .button.secondary {
        background: ${cssManager.bdTheme('#ffffff', '#09090b')};
        border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
        color: ${cssManager.bdTheme('#18181b', '#fafafa')};
      }

      .button.secondary:hover {
        background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
      }

      .button.primary {
        background: ${cssManager.bdTheme('#18181b', '#fafafa')};
        border: none;
        color: ${cssManager.bdTheme('#fafafa', '#18181b')};
      }

      .button.primary:hover:not(:disabled) {
        opacity: 0.9;
      }

      .button.primary:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

      .spinner {
        width: 16px;
        height: 16px;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
    `,
        ];
        render() {
            return html `
      <div class="header">
        <div>
          <div class="header-title">Deploy New Service</div>
          <div class="header-subtitle">Configure and deploy a new Docker container</div>
        </div>
      </div>

      <!-- Basic Info Section -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
            <line x1="9" y1="9" x2="15" y2="9"></line>
            <line x1="9" y1="15" x2="15" y2="15"></line>
          </svg>
          Basic Information
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">Service Name <span class="required">*</span></label>
            <input
              type="text"
              class="form-input"
              placeholder="my-service"
              .value=${this.serviceName}
              @input=${(e) => this.serviceName = e.target.value}
            >
            <div class="form-hint">Unique name for the service (alphanumeric and hyphens)</div>
          </div>
          <div class="form-group">
            <label class="form-label">Registry</label>
            <select
              class="form-select"
              .value=${this.selectedRegistry}
              @change=${(e) => this.selectedRegistry = e.target.value}
            >
              <option value="">Custom Image URL</option>
              ${this.registries.map(reg => html `
                <option value=${reg.id}>${reg.name}</option>
              `)}
            </select>
          </div>
        </div>
        <div class="form-row single">
          <div class="form-group">
            <label class="form-label">Image <span class="required">*</span></label>
            <input
              type="text"
              class="form-input"
              placeholder="nginx:latest or registry.example.com/image:tag"
              .value=${this.imageUrl}
              @input=${(e) => this.imageUrl = e.target.value}
            >
            <div class="form-hint">Docker image to deploy (include tag)</div>
          </div>
        </div>
      </div>

      <!-- Port Configuration -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="10"></circle>
            <line x1="2" y1="12" x2="22" y2="12"></line>
            <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
          </svg>
          Port Configuration
        </div>
        <div class="dynamic-list">
          ${this.ports.map((port, index) => html `
            <div class="dynamic-row">
              <input
                type="text"
                class="form-input"
                placeholder="Host Port"
                .value=${port.hostPort}
                @input=${(e) => this.updatePort(index, 'hostPort', e.target.value)}
              >
              <input
                type="text"
                class="form-input"
                placeholder="Container Port"
                .value=${port.containerPort}
                @input=${(e) => this.updatePort(index, 'containerPort', e.target.value)}
              >
              <select
                class="form-select"
                .value=${port.protocol}
                @change=${(e) => this.updatePort(index, 'protocol', e.target.value)}
              >
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
              </select>
              ${this.ports.length > 1 ? html `
                <button class="remove-button" @click=${() => this.removePort(index)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              ` : ''}
            </div>
          `)}
        </div>
        <button class="add-button" @click=${() => this.addPort()}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          Add Port Mapping
        </button>
      </div>

      <!-- Environment Variables -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="4 17 10 11 4 5"></polyline>
            <line x1="12" y1="19" x2="20" y2="19"></line>
          </svg>
          Environment Variables
        </div>
        <div class="dynamic-list">
          ${this.envVars.map((env, index) => html `
            <div class="dynamic-row">
              <input
                type="text"
                class="form-input"
                placeholder="KEY"
                .value=${env.key}
                @input=${(e) => this.updateEnvVar(index, 'key', e.target.value)}
              >
              <input
                type="text"
                class="form-input"
                placeholder="value"
                .value=${env.value}
                @input=${(e) => this.updateEnvVar(index, 'value', e.target.value)}
              >
              ${this.envVars.length > 1 ? html `
                <button class="remove-button" @click=${() => this.removeEnvVar(index)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              ` : ''}
            </div>
          `)}
        </div>
        <button class="add-button" @click=${() => this.addEnvVar()}>
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="5" x2="12" y2="19"></line>
            <line x1="5" y1="12" x2="19" y2="12"></line>
          </svg>
          Add Environment Variable
        </button>
      </div>

      <!-- Platform Services -->
      <div class="section">
        <div class="section-title">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
            <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
            <line x1="6" y1="6" x2="6.01" y2="6"></line>
            <line x1="6" y1="18" x2="6.01" y2="18"></line>
          </svg>
          Platform Services
        </div>
        <div class="form-hint" style="margin-bottom: 12px;">
          Enable managed infrastructure services for this deployment. Resources are automatically provisioned and connection details injected as environment variables.
        </div>
        <div class="platform-toggle-list">
          <label class="platform-toggle-item">
            <div class="platform-toggle-info">
              <div class="platform-toggle-icon">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>
              </div>
              <div>
                <div class="platform-toggle-name">MongoDB</div>
                <div class="platform-toggle-desc">Document database with auto-provisioned credentials</div>
              </div>
            </div>
            <div class="toggle-switch">
              <input
                type="checkbox"
                ?checked=${this.enableMongoDB}
                @change=${(e) => this.enableMongoDB = e.target.checked}
              >
              <span class="toggle-slider"></span>
            </div>
          </label>
          <label class="platform-toggle-item">
            <div class="platform-toggle-info">
              <div class="platform-toggle-icon">
                <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21 16.5c0 .38-.21.71-.53.88l-7.9 4.44c-.16.12-.36.18-.57.18-.21 0-.41-.06-.57-.18l-7.9-4.44A.991.991 0 0 1 3 16.5v-9c0-.38.21-.71.53-.88l7.9-4.44c.16-.12.36-.18.57-.18.21 0 .41.06.57.18l7.9 4.44c.32.17.53.5.53.88v9z"/></svg>
              </div>
              <div>
                <div class="platform-toggle-name">S3 Storage (MinIO)</div>
                <div class="platform-toggle-desc">Object storage bucket with auto-provisioned access keys</div>
              </div>
            </div>
            <div class="toggle-switch">
              <input
                type="checkbox"
                ?checked=${this.enableS3}
                @change=${(e) => this.enableS3 = e.target.checked}
              >
              <span class="toggle-slider"></span>
            </div>
          </label>
          <label class="platform-toggle-item">
            <div class="platform-toggle-info">
              <div class="platform-toggle-icon">
                <svg viewBox="0 0 24 24" fill="currentColor"><rect x="2" y="2" width="6" height="20"/><rect x="9" y="7" width="6" height="15"/><rect x="16" y="12" width="6" height="10"/></svg>
              </div>
              <div>
                <div class="platform-toggle-name">ClickHouse</div>
                <div class="platform-toggle-desc">Analytics database with auto-provisioned credentials</div>
              </div>
            </div>
            <div class="toggle-switch">
              <input
                type="checkbox"
                ?checked=${this.enableClickHouse}
                @change=${(e) => this.enableClickHouse = e.target.checked}
              >
              <span class="toggle-slider"></span>
            </div>
          </label>
        </div>
      </div>

      <!-- Advanced Options Toggle -->
      <button
        class="toggle-advanced ${this.showAdvanced ? 'open' : ''}"
        @click=${() => this.showAdvanced = !this.showAdvanced}
      >
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
        Advanced Options
      </button>

      ${this.showAdvanced ? html `
        <!-- Volumes -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
            </svg>
            Volume Mounts
          </div>
          <div class="dynamic-list">
            ${this.volumes.length === 0 ? html `
              <div class="form-hint">No volumes configured</div>
            ` : this.volumes.map((vol, index) => html `
              <div class="dynamic-row">
                <input
                  type="text"
                  class="form-input"
                  placeholder="/host/path"
                  .value=${vol.hostPath}
                  @input=${(e) => this.updateVolume(index, 'hostPath', e.target.value)}
                >
                <input
                  type="text"
                  class="form-input"
                  placeholder="/container/path"
                  .value=${vol.containerPath}
                  @input=${(e) => this.updateVolume(index, 'containerPath', e.target.value)}
                >
                <div class="checkbox-row">
                  <input
                    type="checkbox"
                    class="checkbox"
                    ?checked=${vol.readOnly}
                    @change=${(e) => this.updateVolume(index, 'readOnly', e.target.checked)}
                  >
                  <span class="form-hint">RO</span>
                </div>
                <button class="remove-button" @click=${() => this.removeVolume(index)}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="18" y1="6" x2="6" y2="18"></line>
                    <line x1="6" y1="6" x2="18" y2="18"></line>
                  </svg>
                </button>
              </div>
            `)}
          </div>
          <button class="add-button" @click=${() => this.addVolume()}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <line x1="12" y1="5" x2="12" y2="19"></line>
              <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
            Add Volume Mount
          </button>
        </div>

        <!-- Resource Limits -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect>
              <line x1="1" y1="10" x2="23" y2="10"></line>
            </svg>
            Resource Limits
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">CPU Limit</label>
              <input
                type="text"
                class="form-input"
                placeholder="e.g., 1.0 or 0.5"
                .value=${this.cpuLimit}
                @input=${(e) => this.cpuLimit = e.target.value}
              >
              <div class="form-hint">Number of CPUs (leave empty for unlimited)</div>
            </div>
            <div class="form-group">
              <label class="form-label">Memory Limit</label>
              <input
                type="text"
                class="form-input"
                placeholder="e.g., 512m or 1g"
                .value=${this.memoryLimit}
                @input=${(e) => this.memoryLimit = e.target.value}
              >
              <div class="form-hint">Memory limit (leave empty for unlimited)</div>
            </div>
          </div>
        </div>

        <!-- Restart Policy & Network -->
        <div class="section">
          <div class="section-title">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="3"></circle>
              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
            </svg>
            Container Settings
          </div>
          <div class="form-row">
            <div class="form-group">
              <label class="form-label">Restart Policy</label>
              <select
                class="form-select"
                .value=${this.restartPolicy}
                @change=${(e) => this.restartPolicy = e.target.value}
              >
                <option value="always">Always</option>
                <option value="on-failure">On Failure</option>
                <option value="never">Never</option>
              </select>
            </div>
            <div class="form-group">
              <label class="form-label">Network Mode</label>
              <select
                class="form-select"
                .value=${this.networkMode}
                @change=${(e) => this.networkMode = e.target.value}
              >
                <option value="bridge">Bridge</option>
                <option value="host">Host</option>
                <option value="none">None</option>
              </select>
            </div>
          </div>
        </div>
      ` : ''}

      <div class="actions">
        <button class="button secondary" @click=${() => this.handleCancel()}>Cancel</button>
        <button
          class="button primary"
          ?disabled=${this.loading || !this.isValid()}
          @click=${() => this.handleCreate()}
        >
          ${this.loading ? html `<div class="spinner"></div>` : ''}
          ${this.loading ? 'Deploying...' : 'Deploy Service'}
        </button>
      </div>
    `;
        }
        isValid() {
            return this.serviceName.trim() !== '' && this.imageUrl.trim() !== '';
        }
        addPort() {
            this.ports = [...this.ports, { hostPort: '', containerPort: '', protocol: 'tcp' }];
        }
        removePort(index) {
            this.ports = this.ports.filter((_, i) => i !== index);
        }
        updatePort(index, field, value) {
            const newPorts = [...this.ports];
            newPorts[index][field] = value;
            this.ports = newPorts;
        }
        addEnvVar() {
            this.envVars = [...this.envVars, { key: '', value: '' }];
        }
        removeEnvVar(index) {
            this.envVars = this.envVars.filter((_, i) => i !== index);
        }
        updateEnvVar(index, field, value) {
            const newEnvVars = [...this.envVars];
            newEnvVars[index][field] = value;
            this.envVars = newEnvVars;
        }
        addVolume() {
            this.volumes = [...this.volumes, { hostPath: '', containerPath: '', readOnly: false }];
        }
        removeVolume(index) {
            this.volumes = this.volumes.filter((_, i) => i !== index);
        }
        updateVolume(index, field, value) {
            const newVolumes = [...this.volumes];
            newVolumes[index][field] = value;
            this.volumes = newVolumes;
        }
        handleCancel() {
            this.dispatchEvent(new CustomEvent('cancel', { bubbles: true, composed: true }));
        }
        handleCreate() {
            const config = {
                name: this.serviceName.trim(),
                image: this.imageUrl.trim(),
                ports: this.ports.filter(p => p.hostPort && p.containerPort),
                envVars: this.envVars.filter(e => e.key),
                volumes: this.volumes.filter(v => v.hostPath && v.containerPath),
                cpuLimit: this.cpuLimit,
                memoryLimit: this.memoryLimit,
                restartPolicy: this.restartPolicy,
                networkMode: this.networkMode,
                enableMongoDB: this.enableMongoDB,
                enableS3: this.enableS3,
                enableClickHouse: this.enableClickHouse,
            };
            this.dispatchEvent(new CustomEvent('create-service', {
                detail: config,
                bubbles: true,
                composed: true,
            }));
        }
        reset() {
            this.serviceName = '';
            this.imageUrl = '';
            this.selectedRegistry = '';
            this.ports = [{ hostPort: '', containerPort: '', protocol: 'tcp' }];
            this.envVars = [{ key: '', value: '' }];
            this.volumes = [];
            this.cpuLimit = '';
            this.memoryLimit = '';
            this.restartPolicy = 'always';
            this.networkMode = 'bridge';
            this.showAdvanced = false;
            this.enableMongoDB = false;
            this.enableS3 = false;
            this.enableClickHouse = false;
        }
        constructor() {
            super(...arguments);
            __runInitializers(this, _enableClickHouse_extraInitializers);
        }
        static {
            __runInitializers(_classThis, _classExtraInitializers);
        }
    };
    return SzServiceCreateView = _classThis;
})();
export { SzServiceCreateView };
//# sourceMappingURL=data:application/json;base64, 