@if (transformerStrategy(); as strategy) {
  <div class="flex items-start px-4 pt-4">
    <div class="w-10 h-10 flex items-center justify-center relative overflow-hidden shadow-md rounded-lg bg-components-input-bg-normal">
      <xp-icon [icon]="strategy.meta.icon" />
    </div>

    <div class="flex-1 space-y-0.5 px-4 overflow-hidden">
      <div class="text-text-secondary system-md-semibold">
        {{ strategy.meta.label | i18n }}
      </div>
      <div class="text-text-tertiary system-xs-regular truncate" [title]="strategy.meta.description | i18n">
        {{ strategy.meta.description | i18n }}
      </div>
    </div>
  </div>
}

<div class="p-4">

  <div class="flex justify-between mt-2">
    <div class="font-semibold uppercase">
      {{ 'PAC.Pipeline.AuthenticationMethod' | translate: {Default: 'Authentication method'} }}
    </div>

    <ngm-select class="w-48" [(ngModel)]="authMode" [nullable]="false" [selectOptions]="authModeOptions()"/>
  </div>
  @switch (authMode()) {
    @case ('integration') {
      <xp-integration-select class="grow" [provider]="integrationProvider()" [(ngModel)]="integrationId">
        @if (integrationId()) {
          <div icon class="inline-block mr-1.5 xpert-status-indicator xpert-status-indicator--success"></div>
        }
      </xp-integration-select>
    }
  }
</div>

<div class="w-full h-[0.5px] bg-divider-subtle"></div>

<div class="p-4 space-y-4">
  <div class="font-bold my-2">
    {{ 'PAC.Pipeline.Parameters' | translate: {Default: 'Parameters'} }}
  </div>

  <div>
    <div>
      {{ 'PAC.Pipeline.InputVariable' | translate: {Default: 'Input variable'} }}
      <span class="text-text-destructive">*</span></div>
    <xpert-state-variable-select
      [variables]="variables()"
      [(ngModel)]="input"
    />
  </div>

  <div class="font-bold mb-2">
    {{ 'PAC.Pipeline.Configuration' | translate: {Default: 'Configuration'} }}
  </div>
  @if (transformerConfigSchema(); as transformerConfigSchema) {
    <json-schema-form class="mt-2 grid grid-cols-2 gap-2" [schema]="transformerConfigSchema" 
      [(ngModel)]="transformer"
    />
  }
</div>