<form
  class="row d-flex-md"
  [formGroup]="formGroup"
>
  <div class="col-md-6">
    <c8y-form-group class="m-b-16">
      <label
        [title]="'Alarm type' | translate"
        translate
      >
        Alarm type
      </label>
      <input
        class="form-control"
        placeholder="{{ 'e.g. {{ example }}' | translate: { example: 'c8y_UnavailabilityAlarm' } }}"
        name="type"
        type="string"
        formControlName="type"
      />
      <c8y-messages
        [show]="formGroup.controls?.type?.touched && formGroup?.controls?.type?.errors"
      ></c8y-messages>
    </c8y-form-group>
  </div>
  <div class="col-md-6">
    <div
      class="form-group"
      formArrayName="severities"
    >
      <label>{{ 'Severities' | translate }}</label>
      <c8y-form-group
        [hasError]="formGroup.controls.severities.hasError('required')"
        [ngClass]="{
          'm-b-8': !formGroup.controls.severities.hasError('required')
        }"
        data-cy="c8y-alarm-list-widget-config--severities-elements"
      >
        <div class="d-flex gap-8">
          <ng-container *ngFor="let severityOption of severityList">
            <label
              class="c8y-checkbox m-t-0 gap-4"
              [title]="SEVERITY_LABELS[severityOption] | translate"
            >
              <input
                type="checkbox"
                [formControlName]="severityOption"
                [name]="severityOption"
              />
              <span class="a-s-center"></span>
              <ng-container>
                <i
                  class="a-s-center m-r-4 icon-20 {{ severityOption | AlarmSeverityToIconClass }}"
                  [c8yIcon]="severityOption | AlarmSeverityToIcon"
                ></i>
              </ng-container>
              <span>{{ SEVERITY_LABELS[severityOption] | translate }}</span>
            </label>
          </ng-container>
        </div>
        <c8y-messages>
          <c8y-message *ngIf="formGroup.controls.severities.hasError('required')">
            {{ 'Select at least one severity.' | translate }}
          </c8y-message>
        </c8y-messages>
      </c8y-form-group>
    </div>
  </div>
</form>