<div class="w-100">
  <div *ngIf="!subReady" class="content-area">
    <div *ngIf="!subReady" class="card">
      <div
        *ngIf="remained === 0 && loaded"
        class="d-flex justify-content-center"
      >
        <div
          class="no-submitted-tables card-block d-flex justify-content-center flex-column align-items-center"
        >
          <clr-icon
            shape="warning-standard"
            size="60"
            class="is-info"
          ></clr-icon>
          <h3 class="text-center color-gray">
            You have not submitted any tables
          </h3>
        </div>
      </div>
      <div class="card-header" [ngClass]="{ noBorder: !loaded }">
        <h3 class="center clr-col-md-12 text-center" *ngIf="remained !== 0">
          SUBMIT QUEUE
        </h3>
        <p
          class="text-center font-weight-700 color-dark-gray"
          *ngIf="loaded && remained !== 0"
        >
          You have <span>{{ remained }} </span>submissions waiting to be
          approved
        </p>
      </div>

      <div
        *ngIf="!loaded"
        class="h-70vh d-flex justify-content-center flex-column align-items-center"
      >
        <span class="spinner" *ngIf="!loaded"> Loading... </span>
        <div *ngIf="!loaded">
          <h3>Loading submitted list</h3>
        </div>
      </div>
      <div class="clr-col-md-12" *ngIf="loaded">
        <div *ngIf="submitterList && remained !== 0">
          <clr-datagrid class="datagrid-compact datagrid-custom-footer">
            <clr-dg-column>BASE TABLE</clr-dg-column>
            <clr-dg-column [clrDgField]="'submitted'">
              SUBMITTED
              <clr-dg-string-filter
                [clrDgStringFilter]="submittedFilter"
                aria-label="Filter submitted date"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column [clrDgField]="'submitReason'">
              SUBMIT REASON
              <clr-dg-string-filter
                [clrDgStringFilter]="submitReasonFilter"
                aria-label="Filter submit reason"
              ></clr-dg-string-filter>
            </clr-dg-column>
            <clr-dg-column class="d-flex justify-content-center"
              >ACTION</clr-dg-column
            >
            <clr-dg-column class="d-flex justify-content-center"
              >DOWNLOAD</clr-dg-column
            >
            <clr-dg-row
              *clrDgItems="let sub of submitterList; let i = index"
              (click)="goToDetails(sub.tableId)"
              class="cursor-pointer"
            >
              <clr-dg-cell>{{ sub.base }}</clr-dg-cell>
              <clr-dg-cell>{{ sub.submitted }}</clr-dg-cell>
              <!-- <clr-dg-cell>{{sub.approver}}</clr-dg-cell> -->
              <clr-dg-cell>{{ sub.submitReason }}</clr-dg-cell>
              <clr-dg-cell>
                <div
                  class="row justify-content-around"
                  role="tooltip"
                  aria-label="Go to staged data screen"
                >
                  <a
                    class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
                    (click)="goToStage(sub.tableId)"
                  >
                    <clr-icon shape="code" size="28"></clr-icon>
                    <span class="tooltip-content"
                      >Go to staged data screen</span
                    >
                  </a>
                </div>
              </clr-dg-cell>
              <clr-dg-cell class="p-0 d-flex justify-content-center">
                <button
                  class="btn btn-success"
                  aria-label="Download audit file for table record"
                  (click)="download(sub.tableId); $event.stopPropagation()"
                >
                  <clr-icon shape="download"></clr-icon>
                </button>
              </clr-dg-cell>
            </clr-dg-row>

            <clr-dg-footer>
              <clr-dg-pagination #pagination [clrDgPageSize]="10">
                <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
                  >Items per page</clr-dg-page-size
                >
                {{ pagination.firstItem + 1 }} -
                {{ pagination.lastItem + 1 }} of
                {{ pagination.totalItems }} submissions
              </clr-dg-pagination>
            </clr-dg-footer>
          </clr-datagrid>
        </div>
      </div>
    </div>
  </div>

  <div *ngIf="subReady">
    <app-approve-details></app-approve-details>
  </div>
</div>
