<div class="modal fade show" [class.fixed-height]="fixedHeight" tabindex="-1" role="dialog" aria-hidden="true"
  (escape)="handleEscape()">
  <div class="modal-dialog modal-dialog-centered" role="document" #modalDialog [class.wider]="wider">
    <div class="modal-content">
      <div class="modal-header">
        <evt-icon *ngIf="headerIcon" [iconInfo]="headerIcon"></evt-icon>
        <span class="modal-title">
          {{title | translate}}
          <ng-content select="[title]"></ng-content>
        </span>
        <button type="button" class="close" (click)="closeDialog()" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0" [class.no-scroll]="scrollDisabled">
        <div class="{{bodyContentClass}}">
          <ng-content select="[body]"></ng-content>
          <div [innerHtml]="bodyHTML" *ngIf="bodyHTML"></div>
          <ndc-dynamic [ndcDynamicComponent]="bodyComponent" *ngIf="bodyComponent"></ndc-dynamic>
        </div>
      </div>
      <div class="modal-footer">
        <ng-content select="[footer]"></ng-content>
        <div [innerHtml]="footerHTML" *ngIf="footerHTML" class="modal-footer"></div>
        <ndc-dynamic [ndcDynamicComponent]="footerComponent" *ngIf="footerComponent"></ndc-dynamic>
      </div>
    </div>
  </div>
</div>