@switch (displayMode()) {
  @case ('default') {
    @if (containerClass() !== 'd-contents') {
      <div [class]="containerClass() || DEFAULT_CSS_STYLE">
        <button
          class="btn btn-default btn-sm"
          [attr.aria-label]="'Generate export' | translate"
          tooltip="{{ 'Generate export' | translate }}"
          container="body"
          type="button"
          data-cy="datapoints-export-selector--open-export-button"
          (click)="openExportModal()"
          [adaptivePosition]="false"
          [disabled]="isExportDisabled()"
          [delay]="500"
        >
          <i
            class="icon-14"
            c8yIcon="data-export"
          ></i>
        </button>
      </div>
    } @else {
      <button
        class="btn btn-link"
        type="button"
        (click)="openExportModal()"
        [disabled]="isExportDisabled()"
      >
        <i c8yIcon="data-export"></i>
        {{ 'Generate export' | translate }}
      </button>
    }
  }
  @case ('icon-only') {
    <button
      class="btn btn-icon"
      [attr.aria-label]="'Generate export' | translate"
      tooltip="{{ 'Generate export' | translate }}"
      container="body"
      type="button"
      data-cy="datapoints-export-selector--open-export-button"
      (click)="openExportModal()"
      [adaptivePosition]="false"
      [disabled]="!exportConfig()"
      [delay]="500"
    >
      <i
        class="icon-14"
        c8yIcon="data-export"
      ></i>
    </button>
  }
}