@if (controlsAvailable) {
  <ng-container
    [ngTemplateOutlet]="dateTimePicker"
    [ngTemplateOutletContext]="{
      date: [form.value.currentDateContextFromDate, form.value.currentDateContextToDate]
    }"
  ></ng-container>
} @else {
  <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
  #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>
      @if (date) {
        <div
          class="dropdown flex-grow"
          #dropdown="bs-dropdown"
          dropdown
          [insideClick]="true"
        >
          <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-wide dropdown-menu--date-range"
            *dropdownMenu
          >
            <c8y-interval-picker
              class="d-contents"
              formControlName="currentDateContextInterval"
            ></c8y-interval-picker>

            @if (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"
                    [config]="timePickerConfig"
                    [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"
                    [config]="timePickerConfig"
                    [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>
            }
          </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>

      @if (controlsAvailable ? controlsAvailable.aggregation : true) {
        <c8y-aggregation-picker
          formControlName="aggregation"
          [disabledAggregations]="disabledAggregations"
        ></c8y-aggregation-picker>
      }
    </div>
  </form>
</ng-template>