<mat-spinner [diameter]="60" *ngIf="isLoading"></mat-spinner>

<div *ngIf="!isLoading" style="width: 100%; display: flex; justify-content: space-between;">
    <h2 mat-dialog-title>Estadísticas de la circular</h2>
    <mat-icon style="padding: 20px" class="cursor-pointer" mat-dialog-close>close</mat-icon>
</div>
<mat-dialog-content *ngIf="!isLoading" class="mat-typography" style="padding: 20px;">


          <table class="modalTable" *ngIf="!isLoading">

            <tr class="modalTr">
              <td class="modalTh">Usuarios Totales:</td>
              <td class="modalTd">{{data.total}}</td>
              <td class="modalTh">Usuarios Alcanzados:</td>
              <td class="modalTd">{{data.vistos}}</td>

            </tr>
            <tr class="modalTr">
              <td class="modalTh">Porcentaje de Lectura:</td>
              <td class="modalTd">{{data.porcentaje}}</td>
              <td class="modalTh">Porcentaje de Lectura App:</td>
              <td class="modalTd">0%</td>



            </tr>

          </table>

    <div class="table-container">
        <div class="table-responsive " #TABLE>
            <table mat-table [dataSource]="dataSource" #table >

                <ng-container matColumnDef="nombre">
                    <th mat-header-cell *matHeaderCellDef> Nombre Completo </th>
                    <td mat-cell *matCellDef="let circular"> {{circular.nombreCompleto}} </td>
                </ng-container>

                <ng-container matColumnDef="lectura">
                    <th mat-header-cell *matHeaderCellDef> Lectura </th>
                    <td mat-cell *matCellDef="let circular">
                        <!-- {{circular.fechaLectura}} {{circular.medioLectura}} -->
                        <span *ngIf="circular.fechaLectura === null"> No Leido</span>
                        <span *ngIf="circular.fechaLectura !== null">
                            Leido el: {{circular.fechaLectura | date: 'dd/MM/yyyy hh:mm:ss'}} ({{circular.medioLectura}})
                        </span>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="columnas"></tr>
                <tr mat-row *matRowDef="let row; columns: columnas;"></tr>

            </table>
            <!-- <mat-spinner></mat-spinner> -->

            <mat-progress-bar *ngIf="isLoading" mode="indeterminate"></mat-progress-bar>
        </div>
        <mat-paginator [pageSizeOptions]="[5]" showFirstLastButtons ></mat-paginator>
    </div>
</mat-dialog-content>
