<div class="content-area">
  <div class="card">
    <div *ngIf="remained === 0" class="d-flex justify-content-center">
      <div class="card-block noapprovals-info-wrapper">
        <clr-icon
          shape="warning-standard"
          size="60"
          class="is-info icon-dc-fill"
        ></clr-icon>
        <h3 class="text-center color-gray">There are no approvals remaining</h3>
      </div>
    </div>
    <div class="card-header" [ngClass]="{ noBorder: !loaded }">
      <h3
        class="center clr-col-md-12 text-center"
        *ngIf="loaded && remained !== 0"
      >
        REVIEW
      </h3>
      <p
        class="text-center font-weight-700 color-dark-gray"
        *ngIf="loaded && remained !== 0"
      >
        You have <span>{{ remained }} </span>approvals remaining
      </p>
    </div>
    <div *ngIf="!loaded" class="approvals-list-wrapper">
      <span class="spinner" *ngIf="!loaded"> Loading... </span>
      <div *ngIf="!loaded">
        <h3>Loading approvals list</h3>
      </div>
    </div>
    <div class="clr-col-md-12" ng-if="loaded">
      <div *ngIf="approveList && remained !== 0">
        <clr-datagrid class="datagrid-compact datagrid-custom-footer">
          <clr-dg-column [clrDgField]="'submitter'">
            SUBMITTER
            <clr-dg-string-filter
              [clrDgStringFilter]="submitterFilter"
              aria-label="Filter submitter"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <clr-dg-column [clrDgField]="'baseTable'">
            BASE TABLE
            <clr-dg-string-filter
              [clrDgStringFilter]="baseTableFilter"
              aria-label="Filter base table"
            ></clr-dg-string-filter>
          </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>ACTION</clr-dg-column>
          <clr-dg-column>DOWNLOAD</clr-dg-column>

          <clr-dg-row
            *clrDgItems="let approveItem of approveList; let i = index"
          >
            <clr-dg-cell>{{ approveItem.submitter }}</clr-dg-cell>
            <clr-dg-cell>{{ approveItem.baseTable }}</clr-dg-cell>
            <clr-dg-cell>{{ approveItem.submitted }}</clr-dg-cell>
            <clr-dg-cell>{{ approveItem.submitReason }}</clr-dg-cell>
            <clr-dg-cell>
              <div
                class="clr-row d-flex justify-content-around"
                role="toolbar"
                aria-label="Table actions"
              >
                <a
                  class="column-center links tooltip tooltip-md tooltip-bottom-left color-green"
                  (click)="getClicked(i)"
                >
                  <clr-icon
                    shape="check"
                    size="24"
                    aria-hidden="true"
                  ></clr-icon>
                  <span class="tooltip-content">Go to review page screen</span>
                </a>
                <a
                  class="column-center links tooltip tooltip-md tooltip-bottom-left color-red"
                  (click)="!approveItem.rejectLoading ? rejecting(i) : ''"
                >
                  <clr-icon
                    *ngIf="!approveItem.rejectLoading"
                    shape="ban"
                    size="22"
                    aria-hidden="true"
                  ></clr-icon>
                  <clr-spinner
                    *ngIf="approveItem.rejectLoading"
                    [clrSmall]="true"
                    aria-hidden="true"
                  ></clr-spinner>
                  <span class="tooltip-content">Reject</span>
                </a>
                <a
                  class="column-center links tooltip tooltip-md tooltip-bottom-left color-blue"
                  (click)="getTable(approveItem.tableId)"
                >
                  <clr-icon
                    shape="code"
                    size="28"
                    aria-hidden="true"
                  ></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"
                [id]="approveItem.tableId"
                (click)="
                  download(approveItem.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 }} approvals
            </clr-dg-pagination>
          </clr-dg-footer>
        </clr-datagrid>
      </div>
    </div>
  </div>
</div>
