<form
  class="d-flex gap-16 p-l-xs-16 p-r-xs-16 m-t-xs-8 m-b-xs-8"
  [formGroup]="form"
>
  <div>
    <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="{{
          form.value.currentDateContextInterval === 'none'
            ? 'No date filter'
            : (date[0] | c8yDate: DATE_FORMAT) + ' — ' + (date[1] | c8yDate: DATE_FORMAT)
        }}"
        placement="top"
        container="body"
        data-cy="alarms-date-filter--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 text-truncate">
            {{ INTERVAL_TITLES[form.controls.currentDateContextInterval.value] | translate }}
          </span>
          <span
            class="text-10 text-muted text-truncate"
            data-cy="alarms-date-filter--selected-time-range"
            *ngIf="form.controls.currentDateContextInterval.value !== 'none'"
          >
            {{ 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"
          [INTERVALS]="INTERVALS"
        ></c8y-interval-picker>

        <ng-container *ngIf="form.controls.currentDateContextInterval.value === 'custom'">
          <div class="p-l-16 p-r-16">
            <c8y-form-group class="m-b-8"
              [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 class="m-b-8"
              [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-primary btn-sm flex-grow"
              title="{{ 'Apply' | translate }}"
              type="button"
              (click)="applyDateFilter(); dropdown.isOpen = false"
              [disabled]="(form.pristine && form.untouched) || form.invalid || form.value.realtime"
              translate
            >
              Apply
            </button>
          </div>
        </ng-container>
      </ul>
    </div>
  </div>
</form>