<div class="content-area">
  @if (noData) {
    <div
      id="noDataContainer"
      class="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">There is no history to show</h3>
    </div>
  }
  <clr-modal [(clrModalOpen)]="openModal" [clrModalSize]="'xl'">
    <h4 class="modal-title">Approval details</h4>
    <div class="modal-body">
      <table class="table">
        <thead>
          <tr>
            <th class="left">Name</th>
            <th class="left">Value</th>
          </tr>
        </thead>
        <tbody>
          @for (col of tableTitles; track col; let ind = $index) {
            <tr>
              <td class="left">{{ col }}</td>
              <td class="left">
                @if (ind < 1) {
                  <a
                    (click)="getTable(approveData[col])"
                    class="cursor-pointer table-link"
                    >{{ approveData[col] }}</a
                  >
                }
                @if (ind < 2 && ind >= 1) {
                  <div>
                    <a
                      (click)="getBaseTable(approveData[col])"
                      class="cursor-pointer table-link"
                      >VIEW</a
                    >
                    <span> / </span>
                    <a
                      (click)="getEditTable(approveData[col])"
                      class="cursor-pointer table-link"
                      >EDIT</a
                    >
                  </div>
                }
                @if (ind >= 2) {
                  <span>{{ approveData[col] }}</span>
                }
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <div class="modal-footer">
      <button
        type="button"
        aria-label="Close modal"
        class="btn btn-outline"
        (click)="openModal = false"
      >
        OK
      </button>
    </div>
  </clr-modal>

  @if (!loaded) {
    <div
      class="h-70vh d-flex justify-content-center flex-column align-items-center"
    >
      @if (!loaded) {
        <span class="spinner"> Loading... </span>
      }
      @if (!loaded) {
        <div>
          <h3>Loading history</h3>
        </div>
      }
    </div>
  }

  @if (!noData && loaded) {
    <div class="card">
      <div class="card-header">
        @if (loaded) {
          <h3 class="center clr-col-md-12 text-center">HISTORY</h3>
        }
        @if (licenceState.value.history_rows_allowed !== Infinity) {
          <p class="text-center font-weight-700 color-dark-gray">
            To unlock more than
            {{ licenceState.value.history_rows_allowed }} records, contact
            support&#64;datacontroller.io
          </p>
        }
      </div>
      @if (loaded) {
        <clr-datagrid class="datagrid-history datagrid-custom-footer">
          <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]="'status'">
            STATUS
            <clr-dg-string-filter
              [clrDgStringFilter]="statusFilter"
              aria-label="Filter status"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <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]="'submittedReason'">
            SUBMIT REASON
            <clr-dg-string-filter
              [clrDgStringFilter]="submitReasonFilter"
              aria-label="Filter submit reason"
            ></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]="'reviewed'">
            APPROVED / REJECTED
            <clr-dg-string-filter
              [clrDgStringFilter]="reviewedFilter"
              aria-label="Filter reviewed date"
            ></clr-dg-string-filter>
          </clr-dg-column>
          <clr-dg-column>DOWNLOAD</clr-dg-column>
          <clr-dg-row
            *clrDgItems="let historyItem of history"
            (click)="getApprIndex(historyItem)"
          >
            <clr-dg-cell class="verCenter">
              <a
                class="btn btn-sm btn-link m-0"
                (click)="getBaseTable(historyItem.basetable)"
                >{{ historyItem.basetable }}</a
              >
            </clr-dg-cell>
            <clr-dg-cell
              class="verCenter"
              [ngClass]="{
                rejected: historyItem.status === 'REJECTED',
                accepted: historyItem.status === 'APPROVED'
              }"
              >{{ historyItem.status }}</clr-dg-cell
            >
            <clr-dg-cell class="verCenter">{{
              historyItem.submitter
            }}</clr-dg-cell>
            <clr-dg-cell class="verCenter">{{
              historyItem.submittedReason
            }}</clr-dg-cell>
            <clr-dg-cell class="verCenter">{{
              historyItem.submitted
            }}</clr-dg-cell>
            <clr-dg-cell class="verCenter">{{
              historyItem.reviewed
            }}</clr-dg-cell>
            <clr-dg-cell class="verCenter p-0 d-flex justify-content-center">
              <button
                aria-label="Download audit file"
                class="btn btn-success"
                (click)="
                  download(historyItem.tableId); $event.stopPropagation()
                "
              >
                <clr-icon shape="download"></clr-icon>
              </button>
            </clr-dg-cell>
          </clr-dg-row>
          <!-- Let's keep this part if in future we decide to do the paging instead of `load more` approach -->
          <!-- <clr-dg-footer class="d-flex justify-content-start">
                    <span>items per page</span>
                    <select class="mx-5" [(ngModel)]="itemsNum">
                      <option [ngValue]="3">3</option>
                      <option [ngValue]="5">5</option>
                      <option [ngValue]="10">10</option>
                      <option [ngValue]="15">15</option>
                    </select>
                    <clr-dg-pagination
                      #pagination
                      [clrDgPageSize]="itemsNum"
                      class="center"
                      >
                      {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
                      {{ pagination.totalItems }} updates
                    </clr-dg-pagination>
                  </clr-dg-footer> -->
        </clr-datagrid>
      }
      <div
        class="load-more d-flex clr-justify-content-center clr-align-items-center"
      >
        @if (
          this.licenceState.value.history_rows_allowed === Infinity &&
          rowsLeftToLoad > 0
        ) {
          <button
            (click)="loadData()"
            [clrLoading]="loadingMore"
            class="btn btn-success"
          >
            Load {{ rowsLeftToLoad }} more
          </button>
        }
      </div>
    </div>
  }
</div>

./history.component.scss