<div
  class="c8y-prompt alert"
  [ngClass]="[classAlert]"
  data-cy="prompt-alert"
>
  <h3
    class="m-b-16 d-flex a-i-center"
    *ngIf="title"
  >
    <i
      class="dlt-c8y-icon"
      [ngClass]="[classIcon]"
    ></i>
    <span id="modal-title">{{ title | translate }}</span>
  </h3>
  <div id="modal-body">
    <p
      class="text-break-word m-b-16"
      *ngIf="!isHtml(body)"
    >
      {{ body | translate }}
    </p>
    <div
      class="text-break-word m-b-16"
      *ngIf="isHtml(body)"
      [innerHTML]="body | translate"
    ></div>
    <div
      class="c8y-checkbox plain m-b-8"
      *ngFor="let co of confirmOptions | showIfFilter | async | keyvalue"
    >
      <label
        class="c8y-checkbox"
        [title]="co.value.text | translate"
      >
        <input
          type="checkbox"
          [checked]="co.value.checked"
          (change)="co.value.checked = !co.value.checked"
          [disabled]="confirmOptions[co.value.disabledByKey]?.checked"
        />
        <span></span>
        <span class="text-muted">{{ co.value.text | translate }}</span>
      </label>
    </div>
    <ng-content></ng-content>
  </div>
  <div class="alert-footer">
    <button
      class="btn btn-default"
      title="{{ labels.cancel | translate }}"
      type="button"
      *ngIf="labels.cancel !== null"
      (click)="dismiss()"
      data-cy="c8y-confirm-modal--cancel"
    >
      {{ labels.cancel | translate }}
    </button>
    <button
      class="btn btn-primary m-t-xs-8"
      title="{{ labels.ok | translate }}"
      type="button"
      (click)="close()"
      data-cy="c8y-confirm-modal--ok"
    >
      {{ labels.ok | translate }}
    </button>
  </div>
</div>