@if (open) {
  <div class="frg-modal__backdrop">
    <button
      type="button"
      class="frg-modal__backdrop-btn"
      aria-label="Close dialog"
      (click)="onBackdropClick()"
    ></button>
    <dialog
      class="frg-modal"
      [ngClass]="modalClassMap"
      aria-modal="true"
      [attr.aria-labelledby]="ariaLabelledBy || null"
      [attr.aria-describedby]="ariaDescribedBy || null"
      [attr.aria-label]="ariaLabelledBy ? null : ariaLabel"
      open
    >
      @if (showHeader) {
        <div class="frg-modal__header">
          <div class="frg-modal__header-content">
            <ng-content select="[frg-modal-head]"></ng-content>
          </div>
          @if (hasCloseButton) {
            <button
              type="button"
              class="frg-modal__close-btn"
              (click)="onCloseClick()"
              aria-label="Close dialog"
            >
              &times;
            </button>
          }
        </div>
      }

      <div class="frg-modal__body" [ngClass]="{ 'frg-modal__body--with-footer': hasFooter }">
        <ng-content select="[frg-modal-body]"></ng-content>
      </div>

      @if (hasFooter) {
        <div class="frg-modal__footer">
          <ng-content select="[frg-modal-footer]"></ng-content>
        </div>
      }
    </dialog>
  </div>
}