<h2 mat-dialog-title>Información de la orden de compra</h2>
<mat-dialog-content>
    <!-- ALERTA - CARGANDO DATOS... -->
    <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
        <mat-spinner align="center"></mat-spinner>
        <h3>Cargando datos ...</h3>
    </div>

    <!-- TABLA -->
    <table mat-table [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
        <ng-container matColumnDef="ITEM1">
            <th mat-header-cell *matHeaderCellDef> Número de Solicitud </th>
            <td mat-cell *matCellDef="let element"> {{ element.numeroLinea }} </td>
        </ng-container>

        <ng-container matColumnDef="ITEM2">
            <th mat-header-cell *matHeaderCellDef> Modelo </th>
            <td mat-cell *matCellDef="let element"> {{ element.modelo }} </td>
        </ng-container>

        <ng-container matColumnDef="ITEM3">
            <th mat-header-cell *matHeaderCellDef> Familia </th>
            <td mat-cell *matCellDef="let element"> {{ element.familia }} </td>
        </ng-container>

        <ng-container matColumnDef="ITEM4">
            <th mat-header-cell *matHeaderCellDef> Subfamilia </th>
            <td mat-cell *matCellDef="let element">{{ element.subfamilia }}</td>
        </ng-container>

        <ng-container matColumnDef="ITEM5">
            <th mat-header-cell *matHeaderCellDef> Formato </th>
            <td mat-cell *matCellDef="let element"> {{ element.formato }} </td>
        </ng-container>

        <ng-container matColumnDef="ITEM6">
            <th mat-header-cell *matHeaderCellDef> Cantidad </th>
            <td mat-cell *matCellDef="let element"> {{ element.cantidad }} </td>
        </ng-container>


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

        <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell p-40 centre" colspan="12">
                <object data="../../assets/img/empty_data.svg" width="300"></object>
                <h2>Sin datos</h2>
            </td>
        </tr>
    </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button color="warn" mat-dialog-close cdkFocusInitial>Cancelar</button>
</mat-dialog-actions>