<ng-template #headerContent>
  @let linkModel = linkDisplayModel();
  <ng-content select="#header"></ng-content>

  @if (shouldShowHeaderLinks()) {
    <c8y-global-context-link-controls
      [linkStates]="linkModel.linkStates"
      [controlConfigs]="linkModel.controlConfig"
      (allLinksToggled)="toggleAllLinks($event)"
    ></c8y-global-context-link-controls>
  }
</ng-template>

<ng-template #inlineContent>
  @let settings = inlineSettings();
  @let linkModel = linkDisplayModel();

  @if (form && settings) {
    <form
      class="d-flex gap-16 p-l-16 p-r-16 inner-scroll"
      [ngClass]="{
        'p-b-8':
          settings.showTimeContext ||
          settings.showRefresh ||
          settings.showAutoRefresh ||
          settings.showAggregation
      }"
      [formGroup]="form"
    >
      <div class="input-group w-auto input-group-sm">
        @if (settings.showAggregation) {
          <c8y-aggregation-picker
            data-cy="global-inline-date-context--Aggregation-display"
            [disabledAggregations]="getDisabledAggregations()"
            formControlName="aggregation"
            [resetToDefault]="true"
          ></c8y-aggregation-picker>
        }

        @if (settings.showAutoRefresh) {
          <c8y-auto-refresh-control
            [isLoading]="isLoading()"
            [disableCounter]="shouldDisableCounter"
            formControlName="isAutoRefreshEnabled"
            [autoRefreshSeconds]="getAutoRefreshSeconds()"
            [isAutoRefreshConnected]="linkModel.linkStates.isAutoRefreshEnabled ?? false"
            (refresh)="onLocalRefreshTrigger()"
          ></c8y-auto-refresh-control>
        }

        @if (settings.showTimeContext) {
          @let isHistoryMode = form.get('refreshOption')?.value === REFRESH_OPTION.HISTORY;
          <c8y-date-time-context-picker
            style="margin-left: -1px"
            formControlName="dateTimeContext"
            [shouldDisableInterval]="getIntervalDisableConfig()"
            [config]="
              isHistoryMode
                ? { showDateTo: true, showDateFrom: true }
                : { showDateTo: false, showDateFrom: true }
            "
          ></c8y-date-time-context-picker>
        }

        @if (settings.showRefresh) {
          <div class="input-group-btn">
            <button
              class="btn btn-default"
              [attr.aria-label]="'Refresh' | translate"
              [tooltip]="'Refresh' | translate"
              placement="bottom"
              container="body"
              type="button"
              data-cy="global-inline-date-context--reload-button"
              [adaptivePosition]="false"
              [delay]="500"
              [disabled]="isLoading()"
              (click)="refresh.emit(null)"
            >
              <i
                [class.icon-spin]="isLoading()"
                [c8yIcon]="'refresh'"
              ></i>
            </button>
          </div>
        }
      </div>
    </form>
  }

  <ng-content select="#body"></ng-content>
</ng-template>

@switch (effectiveConfig().displayMode) {
  @case (GLOBAL_CONTEXT_DISPLAY_MODE.CONFIG) {
    <ng-container [ngTemplateOutlet]="inlineContent"></ng-container>
  }
  @case (GLOBAL_CONTEXT_DISPLAY_MODE.VIEW_AND_CONFIG) {
    <ng-container [ngTemplateOutlet]="headerContent"></ng-container>
    <ng-container [ngTemplateOutlet]="inlineContent"></ng-container>
  }
  @default {
    @if (shouldRenderHeaderInline()) {
      <ng-container [ngTemplateOutlet]="headerContent"></ng-container>
    }
    <ng-container [ngTemplateOutlet]="inlineContent"></ng-container>
  }
}