<c8y-action-bar-item
  *ngIf="isCoupled"
  [groupId]="ACTION_BAR_GROUP_ID"
  [inGroupPriority]="actionBarInGroupPriority"
  [placement]="'left'"
  itemClass="navbar-form"
>
  <ng-container
    [ngTemplateOutlet]="dateTimePicker"
    [ngTemplateOutletContext]="{
      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
    }"
  ></ng-container>
</c8y-action-bar-item>

<ng-container
  *ngIf="!isCoupled"
  [ngTemplateOutlet]="dateTimePicker"
  [ngTemplateOutletContext]="{
    date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
  }"
></ng-container>

<ng-template
  #dateTimePicker
  let-date="date"
>
  <form
    class="d-flex-sm"
    [formGroup]="form"
  >
    <ng-container *ngIf="displaySettings.globalTimeContext">
      <label>{{ 'Range' | translate }}</label>
      <div
        class="dropdown m-r-4 m-t-xs-4 m-b-xs-4"
        container="body"
        #dropdown="bs-dropdown"
        dropdown
        [insideClick]="true"
        *ngIf="date"
      >
        <button
          class="dropdown-toggle form-control l-h-1 d-flex a-i-center"
          title="{{ date[0] | c8yDate: 'short' }} — {{ date[1] | c8yDate: 'short' }}"
          aria-haspopup="true"
          dropdownToggle
        >
          <span data-cy="widget-time-context--selected-time-range">
            {{ date[0] | c8yDate: 'shortDate' }} — {{ date[1] | c8yDate: 'shortDate' }}
          </span>
          <span class="caret m-r-8 m-l-4"></span>
        </button>

        <div
          class="dropdown-menu dropdown-menu--date-range"
          *dropdownMenu
        >
          <div class="p-16">
            <c8y-form-group
              [ngClass]="form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''"
            >
              <label
                [title]="'From`date`' | translate"
                for="temporaryUserSelectedFromDate"
                translate
              >
                From`date`
              </label>
              <c8y-date-time-picker
                id="temporaryUserSelectedFromDate"
                [maxDate]="form.value.temporaryUserSelectedToDate"
                [placeholder]="'From`date`' | translate"
                [formControl]="form.controls.temporaryUserSelectedFromDate"
                [ngClass]="form.controls.temporaryUserSelectedFromDate.errors ? 'has-error' : ''"
              ></c8y-date-time-picker>
              <c8y-messages [show]="form.controls.temporaryUserSelectedFromDate.errors">
                <c8y-message
                  name="dateAfterRangeMax"
                  [text]="'This date is after the latest allowed date.' | translate"
                ></c8y-message>
                <c8y-message
                  name="invalidDateTime"
                  [text]="'This date is invalid.' | translate"
                ></c8y-message>
              </c8y-messages>
            </c8y-form-group>

            <c8y-form-group
              [ngClass]="form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''"
            >
              <label
                [title]="'To`date`' | translate"
                for="temporaryUserSelectedToDate"
                translate
              >
                To`date`
              </label>
              <c8y-date-time-picker
                id="temporaryUserSelectedToDate"
                [minDate]="form.value.temporaryUserSelectedFromDate"
                [placeholder]="'To`date`' | translate"
                [formControl]="form.controls.temporaryUserSelectedToDate"
                [ngClass]="form.controls.temporaryUserSelectedToDate.errors ? 'has-error' : ''"
              ></c8y-date-time-picker>
              <c8y-messages [show]="form.controls.temporaryUserSelectedToDate.errors">
                <c8y-message
                  name="dateBeforeRangeMin"
                  [text]="'This date is before the earliest allowed date.' | translate"
                ></c8y-message>
                <c8y-message
                  name="invalidDateTime"
                  [text]="'This date is invalid.' | translate"
                ></c8y-message>
              </c8y-messages>
            </c8y-form-group>
          </div>

          <div class="p-16 d-flex gap-8 separator-top">
            <button
              class="btn btn-default btn-sm flex-grow"
              title="{{ 'Reset' | translate }}"
              type="button"
              (click)="reset(); dropdown.isOpen = false"
              [disabled]="form.value.realtime"
              translate
            >
              Reset
            </button>

            <button
              class="btn btn-primary btn-sm flex-grow"
              title="{{ 'Apply' | translate }}"
              type="button"
              (click)="applyDatetimeContext(); dropdown.isOpen = false"
              [disabled]="(form.pristine && form.untouched) || form.invalid || form.value.realtime"
              translate
            >
              Apply
            </button>
          </div>
        </div>
      </div>

      <div class="c8y-select-wrapper m-t-xs-4 m-b-xs-4 d-inline-block-xs">
        <c8y-interval-picker formControlName="currentDateContextInterval"></c8y-interval-picker>
      </div>
    </ng-container>

    <div
      class="m-l-8 d-inline-block-xs"
      *ngIf="displaySettings.globalRealtimeContext"
    >
      <c8y-realtime-control formControlName="realtime"></c8y-realtime-control>
    </div>

    <div
      *ngIf="displaySettings.globalAggregationContext"
      class="c8y-select-wrapper m-t-xs-4 m-b-xs-4 d-inline-block-xs m-l-8"
    >
      <c8y-aggregation-picker
        formControlName="aggregation"
        [disabledAggregations]="disabledAggregations"
      ></c8y-aggregation-picker>
    </div>
  </form>
</ng-template>

<c8y-dashboard-child-action>
  <button
    type="button"
    (click)="toggleDecoupling()"
  >
    <i [c8yIcon]="isCoupled ? 'schedule1' : 'today'"></i>
    <span class="m-l-4">
      {{ (isCoupled ? decoupleTimeContextLabel : coupleTimeContextLabel) | translate }}
    </span>
  </button>
</c8y-dashboard-child-action>