@if (visible()) {
  @if (xUiComponent() !== 'checkbox' || arrayItem()) {
    <div class="flex min-w-0 flex-wrap items-start justify-between gap-2">
      <div class="flex min-w-0 flex-1 items-start">
        @if (xUiComponent() !== 'checkbox' && label(); as title) {
          <div class="min-w-0 break-all py-1 leading-5">
            @if (required()) {
              <span class="text-text-destructive">*</span>
            }
            {{ title | i18n }}
          </div>
        } @else if (arrayItem()) {
          <div class="min-w-0 break-all py-1 leading-5 text-text-secondary">
            {{ 'XP.KEY_WORDS.ArrayItemTitle' | translate: arrayItemTitleParams() }}
          </div>
        }
        @if (hasCustomWidget()) {
          @if (propertyDescription(); as desc) {
            <z-icon zType="info" class="ml-2 text-text-tertiary opacity-80" [zTooltip]="desc | i18n" zPosition="top" />
          }
        }
        @if (xUiHelp(); as helpUrl) {
          <a
            class="inline-flex items-center ml-2 text-sm text-text-tertiary opacity-80 hover:text-primary-500 hover:underline"
            [href]="helpUrl | i18n"
            target="_blank"
            rel="noopener noreferrer"
          >
            <z-icon zType="book-open" />
          </a>
        }
      </div>

      @if (type() === 'array' && !enum() && !hasCustomWidget()) {
        <button
          z-button
          zType="outline"
          zSize="icon"
          type="button"
          [zDisabled]="readonly()"
          [attr.aria-label]="'XP.KEY_WORDS.AddItem' | translate"
          (click)="addArray()"
        >
          <z-icon zType="plus" />
        </button>
      }
      @if (collapsibleObject()) {
        @let collapseLabel =
          objectCollapsed()
            ? ('XP.KEY_WORDS.Expand' | translate: { Default: 'Expand' })
            : ('XP.KEY_WORDS.Collapse' | translate: { Default: 'Collapse' });
        <button
          type="button"
          z-button
          zType="ghost"
          zSize="icon"
          [attr.aria-label]="collapseLabel"
          [attr.aria-expanded]="!objectCollapsed()"
          [zTooltip]="collapseLabel"
          zPosition="top"
          (click)="toggleObjectCollapsed()"
        >
          <z-icon [zType]="objectCollapsed() ? 'chevron-down' : 'chevron-up'" />
        </button>
      }
      @if (arrayItem() && !readonly()) {
        @let deleteLabel = 'XP.KEY_WORDS.DELETE' | translate: { Default: 'Delete' };
        <button
          type="button"
          z-button
          zType="ghost"
          zSize="icon"
          class="text-destructive"
          [attr.aria-label]="deleteLabel"
          [zTooltip]="deleteLabel"
          zPosition="top"
          (click)="removeItem.emit()"
        >
          <z-icon zType="trash" />
        </button>
      }
    </div>
  }

  @if (variants().length) {
    <z-select
      [ngModel]="variantIndex()"
      [ngModelOptions]="{ standalone: true }"
      [zDisabled]="readonly()"
      [attr.aria-label]="label() | i18n"
      (ngModelChange)="selectVariant($event)"
    >
      @for (variant of variants(); track variant) {
        <z-select-item [zValue]="$index">{{ variantLabel(variant, $index) }}</z-select-item>
      }
    </z-select>
  }
  @if (jsonEditor()) {
    <textarea
      z-input
      class="min-h-32 font-mono text-sm"
      [ngModel]="jsonText()"
      [ngModelOptions]="{ standalone: true }"
      [disabled]="readonly()"
      [attr.aria-label]="label() | i18n"
      [zStatus]="jsonError() ? 'error' : undefined"
      (ngModelChange)="updateJson($event)"
    ></textarea>
    @if (jsonError()) {
      <z-alert zType="destructive" [zDescription]="'XP.Common.InvalidJson' | translate" />
    }
  } @else if (hasCustomWidget()) {
    <xp-json-schema-widget-outlet
      [name]="xUiComponent()"
      [schema]="schema()"
      [xUi]="xUi()"
      [ngModel]="value$()"
      [ngModelOptions]="{ standalone: true }"
      (ngModelChange)="update($event)"
      [readonly]="readonly()"
      [required]="required()"
      [variables]="variables()"
      [context]="context()"
    />
  } @else {
    @switch (xUiComponent()) {
      @case ('slider') {
        <div class="flex min-w-0 items-center gap-3">
          <z-slider
            class="min-w-0 flex-1"
            [min]="controlInput('min', numberSchema()?.minimum ?? 0)"
            [max]="controlInput('max', numberSchema()?.maximum ?? 100)"
            [step]="controlInput('step', numberSchema()?.multipleOf ?? 1)"
            [disabledInput]="readonly()"
            [attr.aria-label]="label() | i18n"
            [ngModel]="value$()"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="update($event)"
          />
          <span class="shrink-0 text-sm tabular-nums text-text-secondary">{{ value$() }}</span>
        </div>
      }
      @case ('checkbox') {
        <z-checkbox
          displayDensity="compact"
          [zDisabled]="readonly()"
          [ngModel]="value$()"
          [ngModelOptions]="{ standalone: true }"
          (ngModelChange)="update($event)"
        >
          @if (required()) {
            <span class="text-text-destructive">*</span>
          }
          {{ label() | i18n }}
          @if (propertyDescription(); as desc) {
            <z-icon zType="info" class="ml-2 text-text-tertiary" [zTooltip]="desc | i18n" />
          }
        </z-checkbox>
      }

      @case ('remoteSelect') {
        <xpert-remote-select
          class="w-full h-9"
          [url]="xUi().selectUrl"
          [params]="depends()"
          [multiple]="xUi().multiple"
          [variable]="xUi().variable"
          [variables]="variables()"
          [placeholder]="
            (placeholderMeta() | i18n) +
            (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
          "
          [(ngModel)]="value$"
          [ngModelOptions]="{ standalone: true }"
        />
      }
      @default {
        @if (enum()) {
          <z-select
            class="w-full"
            [attr.aria-label]="label() | i18n"
            [zDisabled]="readonly()"
            [zPlaceholder]="placeholderMeta() | i18n"
            [zClearable]="!required()"
            [ngModel]="enumSelection()"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="updateEnum($event)"
            [zMultiple]="type() === 'array'"
          >
            @for (option of enumOptions(); track option.label + ':' + $index) {
              <z-select-item [zValue]="$index">{{ option.label }}</z-select-item>
            }
          </z-select>
        } @else {
          @switch (type()) {
            @case ('string') {
              @switch (xUiComponent()) {
                @case ('jsonValue') {
                  <textarea
                    z-input
                    class="min-h-[160px] resize-y font-mono text-sm"
                    [placeholder]="
                      (placeholderMeta() | i18n) +
                      (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                    "
                    type="text"
                    [rows]="textareaRows()"
                    [disabled]="readonly()"
                    [ngModel]="value$()"
                    [ngModelOptions]="{ standalone: true }"
                    (ngModelChange)="update($event)"
                  ></textarea>
                }
                @case ('textarea') {
                  <textarea
                    z-input
                    class="min-h-9 resize-y text-sm"
                    [placeholder]="
                      (placeholderMeta() | i18n) +
                      (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                    "
                    type="text"
                    [rows]="textareaRows()"
                    [disabled]="readonly()"
                    [ngModel]="value$()"
                    [ngModelOptions]="{ standalone: true }"
                    (ngModelChange)="update($event)"
                  ></textarea>
                }
                @default {
                  @if (variables()) {
                    <xpert-variable-input
                      class="w-full px-2 py-1 text-text-primary border-0 rounded-lg bg-components-input-bg-normal focus:outline-none focus:ring-1 focus:ring-inset focus:ring-components-input-border-active"
                      [placeholder]="
                        (placeholderMeta() | i18n) +
                        (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                      "
                      [disabled]="readonly()"
                      [variables]="variables()"
                      [ngModel]="value$()"
                      [ngModelOptions]="{ standalone: true }"
                      (ngModelChange)="update($event)"
                    />
                  } @else {
                    <input
                      z-input
                      [placeholder]="
                        (placeholderMeta() | i18n) +
                        (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                      "
                      [type]="xUiInputType()"
                      [disabled]="readonly()"
                      [ngModel]="value$()"
                      [ngModelOptions]="{ standalone: true }"
                      (ngModelChange)="update($event)"
                    />
                  }
                }
              }
            }
            @case ('textarea') {
              <textarea
                z-input
                class="min-h-9 resize-y text-sm"
                [placeholder]="
                  (placeholderMeta() | i18n) +
                  (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                "
                type="text"
                [rows]="textareaRows()"
                [disabled]="readonly()"
                [ngModel]="value$()"
                [ngModelOptions]="{ standalone: true }"
                (ngModelChange)="update($event)"
              ></textarea>
            }
            @case ('number') {
              <input
                z-input
                [placeholder]="
                  (placeholderMeta() | i18n) +
                  (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                "
                type="number"
                [disabled]="readonly()"
                [ngModel]="value$()"
                [ngModelOptions]="{ standalone: true }"
                (ngModelChange)="updateNumber($event)"
              />
            }
            @case ('integer') {
              <input
                z-input
                [placeholder]="
                  (placeholderMeta() | i18n) +
                  (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                "
                type="number"
                [disabled]="readonly()"
                [ngModel]="value$()"
                [ngModelOptions]="{ standalone: true }"
                (ngModelChange)="updateNumber($event)"
              />
            }
            @case ('array') {
              <div class="flex flex-col gap-1">
                @for (item of value$(); track i; let i = $index) {
                  <div class="relative flex group/item rounded-lg">
                    <!-- Preserve inherited context so nested item fields can still resolve outer depends metadata. -->
                    <json-schema-property
                      class="flex-1"
                      [schema]="arraySchema().items"
                      [arrayItem]="true"
                      [arrayIndex]="i"
                      [readonly]="readonly()"
                      [variables]="variables()"
                      [context]="context()"
                      [ngModel]="item"
                      [ngModelOptions]="{ standalone: true }"
                      (ngModelChange)="updateArray(i, $event)"
                      (removeItem)="removeArray(i)"
                    />
                  </div>
                } @empty {
                  <div
                    class="flex justify-center text-sm rounded-lg p-2 text-text-secondary bg-background-default-subtle"
                  >
                    {{ 'XP.KEY_WORDS.AddItem' | translate: { Default: 'Add Item' } }}
                  </div>
                }
              </div>
            }
            @case ('boolean') {
              <z-switch
                [zSize]="controlInput('zSize', 'default')"
                [disabled]="readonly()"
                [ngModel]="value$()"
                [ngModelOptions]="{ standalone: true }"
                (ngModelChange)="update($event)"
              >
                @if (propertyDescription(); as desc) {
                  <z-icon zType="info" class="ml-2 text-text-tertiary opacity-80" [zTooltip]="desc | i18n" />
                }
              </z-switch>
            }
            @case ('object') {
              <div [class]="collapsibleObject() && objectCollapsed() ? 'hidden' : ''">
                <div
                  class="rounded-lg border border-divider-regular px-2"
                  [ngClass]="xUiCols() ? 'grid gap-2 grid-cols-' + xUiCols() : 'flex flex-col gap-2'"
                >
                  @for (param of properties(); track param.name) {
                    <!-- Nested object children need the current object as context.model for sibling-based depends. -->
                    <json-schema-property
                      class="mb-1"
                      [schema]="param"
                      [name]="param.name"
                      [required]="isRequired(param.name)"
                      [readonly]="readonly()"
                      [variables]="variables()"
                      [context]="{ ...(context() ?? {}), model: value$() }"
                      [ngModel]="value$()?.[param.name]"
                      [ngModelOptions]="{ standalone: true }"
                      (ngModelChange)="updateValue(param.name, $event)"
                    />
                  }
                </div>
              </div>
            }
            @default {
              @if (type()) {
                <div>Unsupported type: {{ type() }} for '{{ name() }}'</div>
              } @else {
                @if (variables()) {
                  <xpert-variable-input
                    class="w-full px-2 py-1 text-text-primary border-0 rounded-lg bg-components-input-bg-normal focus:outline-none focus:ring-1 focus:ring-inset focus:ring-components-input-border-active"
                    [placeholder]="
                      (placeholderMeta() | i18n) +
                      (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                    "
                    [disabled]="readonly()"
                    [variables]="variables()"
                    [ngModel]="value$()"
                    [ngModelOptions]="{ standalone: true }"
                    (ngModelChange)="update($event)"
                  />
                } @else {
                  <input
                    z-input
                    [placeholder]="
                      (placeholderMeta() | i18n) +
                      (required() ? '' : '(' + ('XP.KEY_WORDS.Optional' | translate: { Default: 'Optional' }) + ')')
                    "
                    [type]="xUiInputType()"
                    [disabled]="readonly()"
                    [ngModel]="value$()"
                    [ngModelOptions]="{ standalone: true }"
                    (ngModelChange)="update($event)"
                  />
                }
              }
            }
          }
        }
      }
    }
  }
}