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

<ng-template #actionBarTemplate>
  <c8y-action-bar-item
    [groupId]="'timeContext'"
    [inGroupPriority]="1"
    [placement]="'left'"
  >
    <ng-container
      [ngTemplateOutlet]="dateTimePicker"
      [ngTemplateOutletContext]="{
        date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
      }"
    ></ng-container>
  </c8y-action-bar-item>
</ng-template>

<ng-template
  #dateTimePicker
  let-date="date"
>
  <form
    class="d-flex gap-8 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8"
    [formGroup]="form"
  >
    <ng-container>
      <div
        class="dropdown flex-grow"
        #dropdown="bs-dropdown"
        dropdown
        [insideClick]="true"
        *ngIf="date"
      >
        <button
          class="dropdown-toggle form-control l-h-tight d-flex a-i-center"
          attr.aria-label="{{ date[0] | c8yDate: DATE_FORMAT }} — {{
            date[1] | c8yDate: DATE_FORMAT
          }}"
          tooltip="{{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}"
          placement="top"
          container="body"
          data-cy="widget-time-context--date-picker-dropdown-button"
          [adaptivePosition]="false"
          [delay]="500"
          dropdownToggle
        >
          <i
            class="m-r-4"
            c8yIcon="schedule1"
          ></i>
          <div class="d-col text-left fit-w">
            <span
              class="text-12"
              data-cy="widget-time-context--selected-interval"
            >
              {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}
            </span>
            <span
              class="text-10 text-muted text-truncate"
              data-cy="widget-time-context--selected-time-range"
            >
              {{ date[0] | c8yDate: DATE_FORMAT }} — {{ date[1] | c8yDate: DATE_FORMAT }}
            </span>
          </div>
          <span class="caret m-r-16 m-l-4"></span>
        </button>

        <ul
          class="dropdown-menu dropdown-menu--date-range"
          *dropdownMenu
        >
          <c8y-interval-picker
            class="d-contents"
            formControlName="currentDateContextInterval"
          ></c8y-interval-picker>

          <ng-container *ngIf="form.controls.currentDateContextInterval.value === 'custom'">
            <div class="p-l-16 p-r-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)="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>
          </ng-container>
        </ul>
      </div>
    </ng-container>

    <div class="input-group w-auto">
      <c8y-realtime-control
        class="form-control p-0 flex-no-grow w-auto"
        formControlName="realtime"
      ></c8y-realtime-control>

      <c8y-aggregation-picker
        *ngIf="controlsAvailable ? controlsAvailable.aggregation : true"
        formControlName="aggregation"
        [disabledAggregations]="disabledAggregations"
      ></c8y-aggregation-picker>
    </div>
  </form>
</ng-template>