<div 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">
          <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'
              }"
            >
              {{ tableDetails?.REVIEW_STATUS_ID }}
            </span>
          </div>
        </div>
        <div class="clr-col-md-6 card-block">
          <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 mt-20"
                (click)="viewerTableScreen()"
              >
                Go to base table screen
              </button>
              <button
                id="approval-btn"
                class="btn btn-sm btn-success-outline text-center mt-20"
                [disabled]="
                  tableDetails?.REVIEW_STATUS_ID === 'APPROVED' ||
                  tableDetails?.REVIEW_STATUS_ID === 'REJECTED'
                "
                (click)="approveTableScreen()"
              >
                Go to approvals screen
              </button>
              <button
                class="btn btn-sm btn-info-outline text-center mt-20"
                (click)="goBack()"
              >
                Go back to editor
              </button>
              <button
                class="btn btn-sm btn-success text-center mt-20 min-w-0"
                (click)="download(tableDetails?.TABLE_ID)"
              >
                <clr-icon shape="download"></clr-icon>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="card-block">
        <hot-table
          hotId="hotInstance"
          id="hotTable"
          [data]="hotTable.data"
          [colHeaders]="hotTable.colHeaders"
          [columns]="hotTable.columns"
          [maxRows]="hotTable.maxRows"
          [height]="hotTable.height"
          [licenseKey]="hotTable.licenseKey"
          stretchH="all"
          [cells]="hotTable.cells"
        >
          <!--[licenseKey]=null-->
        </hot-table>
      </div>

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