<h1 mat-dialog-title>Detalle requerimiento {{detalleRequerimiento.numeroDoc || '000000000'}}</h1>
<mat-dialog-content >
  <mat-card appearance="outlined" >
    <mat-card-content class="flex grid grid-cols-4 gap-4" >
      <div>
        <mat-label>TIPO DE REQUERIMIENTO : </mat-label>
        <mat-label>{{detalleRequerimiento.tipoRequerimiento || 'Sin Tipo Requerimiento'}}</mat-label>
      </div>
      <div>
        <mat-label>FECHA REGISTRO : </mat-label>
        <mat-label>{{detalleRequerimiento.fechaRegistro || 'Sin Fecha'}}</mat-label>
      </div>
      <div>
        <mat-label>SEDE : </mat-label>
        <mat-label>{{detalleRequerimiento.sede || 'Sin Sede'}}</mat-label>
      </div>
      <div>
        <mat-label>EMPLEADO : </mat-label>
        <mat-label>{{detalleRequerimiento.empleado || 'Sin Empleado'}}</mat-label>
      </div>
      <div>
        <mat-label>OBSERVACIÓN : </mat-label>
        <mat-label>{{detalleRequerimiento.observacion || 'Sin Observacion'}}</mat-label>
      </div>
      <div>
        <mat-label>DESCRIPCIÓN : </mat-label>
        <mat-label>{{detalleRequerimiento.descripcion || 'Sin descripcion'}}</mat-label>
      </div>
      <!-- <mat-label [innerHTML]="'REQUERIMIENTO : ' + (detalleRequerimiento[0].numeroDoc || 'Sin Requerimiento') "></mat-label>
      <mat-label [innerHTML]="'SEDE : ' + (detalleRequerimiento[0].sede || 'Sin Sede') "></mat-label>
      <mat-label [innerHTML]="'EMPLEADO : ' + (detalleRequerimiento[0].empleado || 'Sin Empleado') "></mat-label>
      <mat-label [innerHTML]="'OBSERVACIÓN : ' + (detalleRequerimiento[0].observacion || 'Sin Observacion') "></mat-label>
      <mat-label [innerHTML]="'DESCRIPCIÓN : ' + (detalleRequerimiento[0].descripcion || 'Sin descripcion') "></mat-label> -->
    </mat-card-content>
  </mat-card>


  <table mat-table [dataSource]="dataSource" >

    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->

    <ng-container matColumnDef="posicion">
      <th mat-header-cell *matHeaderCellDef> POSICIÓN </th>
      <td mat-cell *matCellDef="let element"> {{element.posicion}} </td>
    </ng-container>

    <ng-container matColumnDef="nombre">
      <th mat-header-cell *matHeaderCellDef> NOMBRE ARTÍCULO </th>
      <td mat-cell *matCellDef="let element"> {{element.nombre}} </td>
    </ng-container>

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

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

    <tr mat-header-row *matHeaderRowDef="columnasArticulos"></tr>
    <tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
  </table>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">Cerrar</button>
</mat-dialog-actions>