<main class="content-area">
  <div class="clr-col-md-12 card">
    <div
      *ngIf="!loaded"
      class="h-80vh d-flex justify-content-center flex-column align-items-center"
    >
      <span class="spinner" *ngIf="!loaded"> Loading... </span>
      <div *ngIf="!loaded">
        <h3>Loading submitted table</h3>
      </div>
    </div>
    <div *ngIf="loaded">
      <div class="card-header" ng-if="loaded">
        <div class="card-title text-center">
          <h4 class="mt-0">Staged Data</h4>
        </div>
      </div>
      <div class="clr-row" ng-if="loaded">
        <div class="card-block clr-col-md-6 no-borders">
          <div class="card-header py-5">
            <div class="card-title text-center">Basic Submitted Details</div>
          </div>
          <div>
            <span>Table Id:</span>
            <strong>
              <span> {{ tableDetails?.TABLE_ID }}</span>
            </strong>
          </div>
          <div>
            <span>Base Table:</span>
            <a (click)="viewerTableScreen()" class="baseTableLink">
              {{ tableDetails?.BASE_TABLE }}
            </a>
          </div>
          <div>
            <span>Submit Date:</span>
            <span class="mt-10">
              {{ tableDetails?.SUBMITTED_ON_DTTM }}
            </span>
          </div>
          <div>
            <span>Review Status:</span>
            <span
              class="mt-10"
              [ngClass]="{
                rejected: tableDetails?.REVIEW_STATUS_ID === 'REJECTED',
                accepted: tableDetails?.REVIEW_STATUS_ID === 'APPROVED'
              }"
              [attr.aria-label]="
                'Review status: ' + tableDetails?.REVIEW_STATUS_ID
              "
              role="status"
            >
              {{ tableDetails?.REVIEW_STATUS_ID }}
            </span>
          </div>
        </div>
        <div class="clr-col-md-6 card-block no-borders">
          <div class="card-header py-5">
            <div class="card-title text-center">Actions</div>
          </div>
          <div class="mt-20">
            <div class="row">
              <button
                class="btn btn-sm btn-outline text-center mr-5i"
                (click)="viewerTableScreen()"
                [disabled]="revertingChanges"
                aria-label="View base table"
              >
                View base table
              </button>
              <button
                *ngIf="!(tableDetails?.['ALLOW_RESTORE'] === 'YES')"
                id="approval-btn"
                class="btn btn-sm btn-success-outline text-center mr-5i"
                [disabled]="
                  tableDetails?.REVIEW_STATUS_ID === 'APPROVED' ||
                  tableDetails?.REVIEW_STATUS_ID === 'REJECTED'
                "
                (click)="approveTableScreen()"
                [disabled]="revertingChanges"
                aria-label="Approve table"
              >
                Approve
              </button>
              <button
                class="btn btn-sm btn-info-outline text-center mr-5i"
                (click)="goBack()"
                [disabled]="revertingChanges"
                aria-label="Edit base table"
              >
                Edit base table
              </button>
              <button
                class="btn btn-sm btn-success text-center mr-5i min-w-0"
                (click)="download(tableDetails?.TABLE_ID)"
                aria-label="Download audit file"
              >
                <clr-icon shape="download" aria-hidden="true"></clr-icon>
              </button>

              <clr-tooltip>
                <button
                  *ngIf="tableDetails?.['ALLOW_RESTORE'] === 'YES'"
                  (click)="revertChanges()"
                  clrTooltipTrigger
                  [clrLoading]="revertingChanges"
                  class="btn btn-sm btn-danger text-center mt-20"
                  aria-label="Revert this and all subsequent changes"
                >
                  REVERT

                  <clr-tooltip-content
                    clrPosition="bottom-left"
                    clrSize="lg"
                    *clrIfOpen
                  >
                    <span> Revert this and all subsequent changes </span>
                  </clr-tooltip-content>
                </button>
              </clr-tooltip>
            </div>
          </div>
        </div>
      </div>
      <div class="card-block">
        <hot-table
          id="hotTable"
          [data]="hotTable.data"
          [settings]="hotTableSettings()"
          aria-label="Staged data table"
        >
          <!--[licenseKey]=null-->
        </hot-table>
      </div>

      <div class="card-footer d-flex justify-content-center"></div>
    </div>
  </div>
</main>
