<div style="width: 800px">
  <h1 mat-dialog-title class="centre">Detalles de Descanso</h1>
  <div mat-dialog-content>
    <mat-card class="card-normal mat-elevation-z2" id="card-personalizado">
      <table
        *ngIf="dataSource.data.length != 0"
        mat-table
        [dataSource]="this.orderWeek()"
        class="centre animated fadeIn"
      >
        <ng-container matColumnDef="dias_descanso_dia">
          <th mat-header-cell *matHeaderCellDef class="centre">
            Día de la Semana
          </th>
          <td mat-cell *matCellDef="let element">
            {{ formartWeek(element.dia)  }}
          </td>
        </ng-container>
        <ng-container matColumnDef="dias_descanso_descansa">
          <th mat-header-cell *matHeaderCellDef class="centre">Descansa</th>
          <td mat-cell *matCellDef="let element">{{ element.descansa }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </mat-card>
    <div class="centre">
      <button
        color="warn"
        mat-mini-fab
        class="mr-2"
        [mat-dialog-close]="false"
        matTooltip="Cerrar"
      >
        <mat-icon>close</mat-icon>
      </button>
    </div>
  </div>
</div>
