<div
  class="c8y-global-context"
  data-cy="global-context--configuration-panel"
  [collapse]="isCollapsed()"
  (collapsed)="onCollapsed()"
  (expanded)="onExpanded()"
  [isAnimated]="true"
>
  <div class="p-t-16 p-b-16 p-l-24 p-r-24 separator-bottom">
    <span
      class="h4"
      translate
    >
      Time mode
    </span>
  </div>
  <div>
    @if (!isCollapsed()) {
      <c8y-configuration-controls
        [activeMode]="activeMode()"
        [liveContext]="liveViewContext()"
        [historyContext]="historyViewContext()"
        [supportedModes]="supportedModes()"
        (refreshOptionChange)="onModeSelected($event)"
        (contextChange)="onModeChange($event)"
        (validationStatus)="onValidationStatusChange($event)"
      ></c8y-configuration-controls>
    }
  </div>
  <div class="c8y-top-drawer--footer">
    <div class="d-flex a-i-center gap-8">
      <button
        class="btn btn-default"
        [title]="'Close help' | translate"
        aria-controls="collapseHelp"
        [attr.aria-expanded]="!isCollapsed()"
        type="button"
        (click)="toggle()"
        data-cy="global-context--Close-button"
        translate
      >
        Close
      </button>
      <button
        class="btn btn-primary"
        [title]="'Apply global context' | translate"
        aria-controls="collapseHelp"
        [attr.aria-expanded]="!isCollapsed()"
        type="button"
        (click)="apply()"
        [disabled]="!hasPendingChanges() || !isFormValid()"
        translate
        data-cy="global-date-context--Apply-button"
      >
        Apply
      </button>

      <label class="c8y-checkbox d-flex align-items-center m-b-0">
        <input
          class="m-r-4"
          type="checkbox"
          [ngModel]="shouldSave()"
          (ngModelChange)="shouldSaveInDashboard($event)"
        />
        <span class="a-s-center m-r-8"></span>
        <span
          class="text-truncate"
          translate
        >
          Save in dashboard configuration
        </span>
        <button
          class="btn-help btn-help--sm m-l-4"
          [attr.aria-label]="'Help' | translate"
          [popover]="helpText | translate"
          placement="right"
          triggers="focus"
          container="body"
          type="button"
          [adaptivePosition]="true"
        ></button>
      </label>
    </div>
  </div>
</div>