@if (open()) {
<div
  class="hs-overlay open hs-overlay-backdrop-open:!bg-[#32325180] dark:hs-overlay-backdrop-open:!bg-[#323251cc] ti-modal pointer-events-none"
  (mousedown)="onBackdropClick($event)">
  <div class="fixed inset-0 pointer-events-auto bg-[#32325180] dark:bg-[#323251cc]" aria-hidden="true"
    (mousedown)="onBackdropClick($event)"></div>

  <div [class]="modalBoxClass()" role="dialog" aria-modal="true" [attr.aria-label]="title()" tabindex="-1"
    (mousedown)="$event.stopPropagation()">
    <div class="ti-modal-content border-defaultborder dark:border-defaultborder max-h-[90vh] overflow-hidden">
      @if (showHeader()) {
      <div class="ti-modal-header border-defaultborder dark:border-defaultborder">
        <div class="min-w-0">
          <h6 class="ti-modal-title m-0">
            {{ title() }}
          </h6>
        </div>

        @if (showCloseButton()) {
        <button type="button" class="ti-modal-close-btn cursor-pointer disabled:cursor-not-allowed disabled:opacity-50"
          aria-label="Close modal" [disabled]="loading()" (click)="close()">
          <i class="ri-close-line leading-none"></i>
        </button>
        }
      </div>
      }

      <div class="ti-modal-body px-4 min-h-0 overflow-y-auto">
        @if (subtitle()) {
        <p class="mb-4 text-[0.8125rem] leading-5 text-textmuted">
          {{ subtitle() }}
        </p>
        }

        <ng-content />
      </div>

      @if (showFooter()) {
      <div class="ti-modal-footer border-defaultborder dark:border-defaultborder">
        @if (showCancelButton()) {
        <app-button action="cancel" [label]="cancelLabel()" [showIcon]="true" [disabled]="loading()"
          (buttonClicked)="close()" />
        }

        @if (showSubmitButton()) {
        <app-button [action]="submitAction()" [label]="submitLabel()" [loadingLabel]="loadingLabel()" [showIcon]="true"
          [loading]="loading()" [disabled]="submitDisabled()" (buttonClicked)="submit()" />
        }
      </div>
      }
    </div>
  </div>
</div>
}