<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' }}"
    >
      <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"
      [ngModel]="currentPredefinedTimeSpan"
      (ngModelChange)="predefinedDateFromSelected($event)"
    >
      <option value="undefined" disabled="true">{{ 'Custom range' | translate }}</option>
      <option *ngFor="let dateFrom of predefinedTimeSpanList" [ngValue]="dateFrom">
        {{ dateFrom.title }}
      </option>
    </select>
    <span></span>
  </div>
</ng-template>

<c8y-dashboard-child-action *ngIf="canDecouple">
  <a href="" (click)="toggleDecoupling(); (false)">
    <i [c8yIcon]="isCoupled ? 'unlock' : 'lock'"></i>
    <span class="m-l-4">
      {{ isCoupled ? 'Decouple time context' : ('Couple time context' | translate) }}
    </span>
  </a>
</c8y-dashboard-child-action>