<ng-container *transloco="let t">
  <div class="modal-header" [class.book-reader]="config.bookReader">
    <h4 class="modal-title" id="modal-basic-title">{{config.header | confirmTranslate}}</h4>
    @if (!config.disableEscape) {
      <button type="button" class="btn-unstyled ms-auto" [attr.aria-label]="t('common.close')" (click)="close()">
        <i class="fas fa-times"></i>
      </button>
    }
  </div>

  @if (config._type === 'prompt') {
    <div class="modal-body" style="overflow-x: auto" [class.book-reader]="config.bookReader">
      <form [formGroup]="formGroup">
        <div [innerHtml]="(config.content | confirmTranslate)! | safeHtml"></div>
        <input type="text" class="form-control" aria-labelledby="modal-basic-title" formControlName="prompt" />
      </form>
    </div>
  } @else {
    <div class="modal-body" [class.book-reader]="config.bookReader" style="overflow-x: auto" [innerHtml]="(config.content | confirmTranslate)! | safeHtml"></div>
  }

  <div class="modal-footer" [class.book-reader]="config.bookReader">
    @for(btn of config.buttons; track btn) {
      <div>
        <button type="button" class="btn btn-{{btn.type}}" (click)="clickButton(btn)">{{btn.text | confirmTranslate}}</button>
      </div>
    }
  </div>

</ng-container>
