<div class="p-relative fit-h">
  <div [attr.class]="containerClass()">
    <c8y-tabs-outlet
      [orientation]="controlsDisplayMode()"
      [outletName]="resolvedOutletName()"
      [attr.outletname]="resolvedOutletName()"
      [openFirstTab]="false"
      [tabs]="inlineTabs()"
    ></c8y-tabs-outlet>

    @if (selectedMode() === REFRESH_OPTION.LIVE) {
      <div class="p-l-24 p-r-24 fit-w min-width-0">
        <c8y-live-mode-configuration-controls
          [settings]="settings()"
          [context]="liveContext()"
          [intervalOptions]="intervalOptions()"
          (contextChange)="handleLiveChanges($event)"
        ></c8y-live-mode-configuration-controls>
      </div>
    }

    @if (selectedMode() === REFRESH_OPTION.HISTORY) {
      <div class="p-l-24 p-r-24 fit-w min-width-0">
        <c8y-history-mode-configuration-controls
          [settings]="settings()"
          [context]="historyContext()"
          (contextChange)="handleHistoryChanges($event)"
          (validationStatus)="handleValidationStatus($event)"
        ></c8y-history-mode-configuration-controls>
      </div>
    }
  </div>

  <ng-template #LiveTab>
    <i [c8yIcon]="'process'"></i>
    <div>
      <p class="text-bold">{{ MODE_LABELS.LIVE | translate }}</p>
      <p class="tab-description text-12 l-h-tight">
        {{ MODE_DESCRIPTIONS.LIVE | translate }}
      </p>
    </div>
  </ng-template>
  <ng-template #HistoryTab>
    <i [c8yIcon]="'schedule1'"></i>
    <div>
      <p class="text-bold">{{ MODE_LABELS.HISTORY | translate }}</p>
      <p class="tab-description text-12  l-h-tight">
        {{ MODE_DESCRIPTIONS.HISTORY | translate }}
      </p>
    </div>
  </ng-template>
</div>