<div class="container">
    <div class="row">
      <div class="col-12">
        <h2 class="border-bottom pb-2">{{'quality-assurance.title'| translate}}</h2>
        <ds-alert [type]="'alert-info'" [content]="'quality-assurance.source.description'"></ds-alert>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        <h4 class="border-bottom pb-2">{{'quality-assurance.source'| translate}}</h4>

        <ds-loading class="container" *ngIf="(isSourceLoading() | async)" message="{{'quality-assurance.loading' | translate}}"></ds-loading>
        <ds-pagination *ngIf="!(isSourceLoading() | async)"
                       [paginationOptions]="paginationConfig"
                       [collectionSize]="(totalElements$ | async)"
                       [hideGear]="false"
                       [hideSortOptions]="true"
                       (paginationChange)="getQualityAssuranceSource()">

          <ds-loading class="container" *ngIf="(isSourceProcessing() | async)" message="'quality-assurance.loading' | translate"></ds-loading>
          <ng-container *ngIf="!(isSourceProcessing() | async)">
            <div *ngIf="(sources$|async)?.length == 0" class="alert alert-info w-100 mb-2 mt-2" role="alert">
              {{'quality-assurance.noSource' | translate}}
            </div>
            <div *ngIf="(sources$|async)?.length != 0" class="table-responsive mt-2">
              <table id="epeople" class="table table-striped table-hover table-bordered">
                <thead>
                <tr>
                  <th scope="col">{{'quality-assurance.table.source' | translate}}</th>
                  <th scope="col">{{'quality-assurance.table.last-event' | translate}}</th>
                  <th scope="col">{{'quality-assurance.table.actions' | translate}}</th>
                </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let sourceElement of (sources$ | async); let i = index">
                    <td>{{sourceElement.id}}</td>
                    <td>{{sourceElement.lastEvent}}</td>
                    <td>
                      <div class="btn-group edit-field">
                        <button
                                class="btn btn-outline-primary btn-sm"
                                title="{{'quality-assurance.button.detail' | translate }}"
                                [routerLink]="[sourceElement.id]">
                          <span class="badge badge-info">{{sourceElement.totalEvents}}</span>
                          <i class="fas fa-info fa-fw"></i>
                        </button>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </ng-container>
        </ds-pagination>
      </div>
    </div>
  </div>

