<div class="dialog-content-wrapper">
  <div class="dialog-header">
    <div class="dialog-title-icon">
      <div class="dialog-title">{{ columnSelectorIntl.dialogTitle }}</div>
    </div>
    <div>
      <button class="close-button" mat-icon-button (click)="cancel()" data-test="modal-window-close-button">
        <i class="Bosch-Ic Bosch-Ic-abort"></i>
      </button>
    </div>
  </div>
  <mat-dialog-content>
    <bci-picklist
      [source]="availableColumns"
      [target]="selectedColumns"
      [displayProperty]="'label'"
      [sourceFilter]="true"
      [targetFilter]="true"
      [sourceSorting]="true"
      [targetSorting]="false"
      (sourceChange)="onSourceChanged($event)"
      (targetChange)="onTargetChanged($event)"
    >
      <h5 bciPicklistSourceHeader>{{ columnSelectorIntl.picklistSourceHeader }}</h5>
      <h5 bciPicklistTargetHeader>{{ columnSelectorIntl.picklistTargetHeader }}</h5>
    </bci-picklist>
  </mat-dialog-content>
</div>
<mat-dialog-actions>
  <button
    bciPrimaryButton
    data-dismiss="modal"
    data-test="column-selector-save-button"
    (click)="confirm()"
    [disabled]="!changed"
    class="optionalButton"
  >
    {{ columnSelectorIntl.save }}
  </button>
  <button
    bciSecondaryButton
    data-dismiss="modal"
    data-test="column-selector-cancel-button"
    (click)="cancel()"
    class="optionalButton"
  >
    {{ columnSelectorIntl.cancel }}
  </button>
</mat-dialog-actions>
