<clr-modal
  appDragNdrop
  [(clrModalOpen)]="modalEnabled"
  [clrModalSize]="'xl'"
  [clrModalClosable]="!forceReload"
  class="clr-abort-modal"
>
  <h3 class="modal-title">
    {{ data.modalTitle }}
    @if (data.sasService && data.sasService.length > 0) {
      <p class="sasService mt-0">
        SAS Service: <strong>{{ data.sasService }}</strong>
      </p>
    }
  </h3>
  <div class="modal-body">
    <div [innerHTML]="data.message" class="abortMsg"></div>

    @if (data.details !== null) {
      <div class="systext">
        <p>
          <strong>SYSWARNINGTEXT:</strong> {{ data.details.SYSWARNINGTEXT }}
        </p>
        <p><strong>SYSERRORTEXT:</strong> {{ data.details.SYSERRORTEXT }}</p>
        <p><strong>MAC:</strong> {{ data.details.MAC }}</p>
      </div>
    }
  </div>
  <div class="modal-footer">
    @if (showConfiguratorButton(data.sasService)) {
      <button
        type="button"
        class="btn btn-primary"
        (click)="openConfigurator()"
      >
        Open configurator
      </button>
    }

    @if (data.details !== null) {
      <button
        type="button"
        class="btn btn-primary"
        (click)="openRequestsModal()"
      >
        Open requests modal
      </button>
    }

    @if (data.details?.LOG && (data.details?.LOG?.trim())!.length > 0) {
      <button type="button" class="btn btn-primary" (click)="downloadLog()">
        Download log
      </button>
    }

    @if (!forceReload) {
      <button type="button" class="btn btn-primary" (click)="closeAbortModal()">
        Close
      </button>
    }

    @if (forceReload) {
      <button type="button" class="btn btn-primary" (click)="reload()">
        Reload
      </button>
    }
  </div>
</clr-modal>
