@if (chunkerStrategy(); as chunkerStrategy) {
  <div class="flex items-start p-4">
    <div
      class="w-10 h-10 flex items-center justify-center relative overflow-hidden shadow-md rounded-lg bg-components-input-bg-normal"
    >
      @if (chunkerStrategy.icon; as icon) {
        <xp-icon class="!block w-8 h-8 shrink-0" [icon]="icon" />
      } @else {
        <i class="ri-equalizer-3-line"></i>
      }
    </div>

    <div class="flex-1 space-y-0.5 px-4 overflow-hidden">
      <div class="text-text-secondary system-md-semibold">
        {{ chunkerStrategy.label | i18n }}
      </div>
      <div class="text-text-tertiary system-xs-regular truncate" [title]="chunkerStrategy.description | i18n">
        {{ chunkerStrategy.description | i18n }}
      </div>
    </div>
  </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 (chunkerConfigSchema(); as chunkerConfigSchema) {
    <json-schema-form class="mt-2 grid grid-cols-2 gap-2" [schema]="chunkerConfigSchema" [(ngModel)]="chunkerConfig" />
  } @else {
    <div class="text-sm text-text-secondary bg-orange-50 rounded-xl px-3 py-2">
      {{ 'XP.Pipeline.NoPluginConfig' | translate: { Default: 'No configuration required for this plugin.' } }}
    </div>
  }
</div>