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

    <div *ngIf="data.details !== null" 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">
    <button
      *ngIf="showConfiguratorButton(data.sasService)"
      type="button"
      class="btn btn-primary"
      (click)="openConfigurator()"
    >
      Open configurator
    </button>

    <button
      *ngIf="data.details !== null"
      type="button"
      class="btn btn-primary"
      (click)="openRequestsModal()"
    >
      Open requests modal
    </button>

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

    <button
      *ngIf="!forceReload"
      type="button"
      class="btn btn-primary"
      (click)="closeAbortModal()"
    >
      Close
    </button>

    <button
      *ngIf="forceReload"
      type="button"
      class="btn btn-primary"
      (click)="reload()"
    >
      Reload
    </button>
  </div>
</clr-modal>
