@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">
      {{ 'XP.Pipeline.AuthenticationMethod' | translate: { Default: 'Authentication method' } }}
    </div>

    <xp-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">
    {{ 'XP.Pipeline.Parameters' | translate: { Default: 'Parameters' } }}
  </div>

  <div>
    <div>
      {{ 'XP.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">
    {{ 'XP.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>