<form [formGroup]="formGroup" class="p-16">
  <div
    *ngIf="!omitProperties.color"
    class="form-group d-flex a-i-center gap-8"
    [title]="'Change color' | translate"
  >
    <label class="m-0">{{ 'Color' | translate }}</label>
    <div class="c8y-colorpicker"
      [ngClass]="{
        'c8y-colorpicker--event': timelineType === 'EVENT',
        'c8y-colorpicker--alarm': timelineType !== 'EVENT'
      }"
    >
      <input
        type="color"
        formControlName="color"
        (click)="$event.stopPropagation()"
      />
      <span [style.background-color]="formGroup.value.color">
        <i [c8yIcon]="timelineType === 'EVENT' ? 'c8y-events' : 'bell'"></i>
      </span>
    </div>
  </div>

  <c8y-alarm-event-attributes-form
    formControlName="details"
    [timelineType]="timelineType"
    [omitProperties]="omitProperties"
    [selectedItems]="selectedItems"
  ></c8y-alarm-event-attributes-form>

  <div class="d-flex p-t-16">
    <button class="btn btn-default btn-sm" (click)="cancel.emit()">
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary btn-sm"
      [disabled]="(valid$ | async) === false"
      (click)="add()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Select' | translate }}
    </button>
  </div>
</form>