<div
  class="c8y-prompt alert"
  [ngClass]="[classAlert]"
  data-cy="prompt-alert"
>
  @if (title) {
    <h3 class="m-b-16 d-flex a-i-center">
      <i
        class="dlt-c8y-icon"
        [ngClass]="[classIcon]"
      ></i>
      <span id="modal-title">{{ title | translate }}</span>
    </h3>
  }
  <div id="modal-body">
    @if (!isHtml(body)) {
      <p class="text-break-word m-b-16">
        {{ body | translate }}
      </p>
    }
    @if (isHtml(body)) {
      <div
        class="text-break-word m-b-16"
        [innerHTML]="body | translate"
      ></div>
    }
    @for (co of confirmOptions | showIfFilter | async | keyvalue; track co) {
      <div class="c8y-checkbox plain m-b-8">
        <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>{{ co.value.text | translate }}</span>
        </label>
      </div>
    }
    <ng-content></ng-content>
  </div>
  <div class="alert-footer">
    @if (labels.cancel !== null) {
      <button
        class="btn btn-default"
        title="{{ labels.cancel | translate }}"
        type="button"
        (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>