<c8y-action-bar-item
  *ngIf="isCoupled"
  [groupId]="'timecontext'"
  [placement]="'left'"
  itemClass="navbar-form"
>
  <ng-container
    [ngTemplateOutlet]="dateTimePicker"
    [ngTemplateOutletContext]="{ date: globalDate }"
  ></ng-container>
</c8y-action-bar-item>

<ng-container
  *ngIf="!isCoupled"
  [ngTemplateOutlet]="dateTimePicker"
  [ngTemplateOutletContext]="{ date: localDate }"
></ng-container>

<ng-template #dateTimePicker let-date="date">
  <label>{{ 'Time range' | translate }}</label>
  <div
    class="dropdown m-r-4"
    dropdown
    #dropdown="bs-dropdown"
    container="body"
    [insideClick]="true"
  >
    <button
      class="dropdown-toggle form-control l-h-1 d-flex a-i-center"
      dropdownToggle
      title="{{ date[0] | c8yDate: 'short' }} — {{ date[1] | c8yDate: 'short' }}"
      aria-haspopup="true"
    >
      <span>{{ date[0] | c8yDate: 'shortDate' }} — {{ date[1] | c8yDate: 'shortDate' }}</span>
      <span class="caret m-r-8 m-l-4"></span>
    </button>

    <div *dropdownMenu class="dropdown-menu dropdown-menu--date-range">
      <div class="p-16">
        <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
      </div>
      <div class="p-16 d-flex gap-8 separator-top">
        <button
          class="btn btn-default btn-sm flex-grow"
          (click)="reset(); dropdown.isOpen = false"
          title="{{ 'Reset' | translate }}"
          type="button"
          translate
        >
          Reset
        </button>

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

  <div class="c8y-select-wrapper">
    <select
      class="form-control"
      [attr.aria-label]="'Range' | translate"
      [ngModel]="currentPredefinedTimeSpan"
      (ngModelChange)="predefinedDateFromSelected($event)"
    >
      <option value="undefined" disabled="true">{{ 'Custom range`time`' | translate }}</option>
      <option *ngFor="let dateFrom of predefinedTimeSpanList" [ngValue]="dateFrom">
        {{ dateFrom.title | translate }}
      </option>
    </select>
    <span></span>
  </div>
</ng-template>

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