<h2 mat-dialog-title>Detalles del Línea de Solicitud</h2>
<mat-dialog-content style="padding: 0;">
  <mat-stepper>
    <mat-step label="Descripción de la línea">
      <mat-grid-list cols="3" rowHeight="82px" [formGroup]="formGroup">

        <mat-grid-tile colspan="1">
          <mat-form-field appearance="outline" class="itemInput">
            <mat-label>Estado</mat-label>
            <input matInput formControlName="estado" readonly />
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="1">
          <mat-form-field appearance="outline" class="itemInput">
            <mat-label>Fecha de Modificación</mat-label>
            <input matInput formControlName="fechaModificacion" readonly />
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="1">
          <mat-form-field appearance="outline" class="itemInput">
            <mat-label>Usuario de Modificación</mat-label>
            <input matInput formControlName="usuarioModificacion" readonly />
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="3" rowspan="2">
          <mat-form-field appearance="outline" class="itemInput">
            <mat-label>Descripción y/o Motivo</mat-label>
            <textarea matInput formControlName="descripcion" style="height: 105px; resize: none;" readonly></textarea>
          </mat-form-field>
        </mat-grid-tile>

      </mat-grid-list>
      <div align="end" style="margin-top: 20px;">
        <button mat-button color="warn" class="red_primary_font mr-8" mat-dialog-close cdkFocusInitial> Cerrar </button>
        <button mat-button color="primary" matStepperNext> Siguiente </button>
      </div>
    </mat-step>
    <mat-step label="Lista de productos">
      <table mat-table [dataSource]="dataSource">
        <ng-container matColumnDef="NO">
          <th mat-header-cell *matHeaderCellDef> No </th>
          <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"></td>
        </ng-container>

        <ng-container matColumnDef="MODELO">
          <th mat-header-cell *matHeaderCellDef> Modelo </th>
          <td mat-cell *matCellDef="let element"> {{ element.MODELO }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"></td>
        </ng-container>

        <ng-container matColumnDef="CODIGO">
          <th mat-header-cell *matHeaderCellDef> Código </th>
          <td mat-cell *matCellDef="let element"> {{ element.CODIGO }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"></td>
        </ng-container>

        <ng-container matColumnDef="CARACTERISTICAS">
          <th mat-header-cell *matHeaderCellDef> Características </th>
          <td mat-cell *matCellDef="let element"> {{ element.CARACTERISTICAS }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"></td>
        </ng-container>

        <ng-container matColumnDef="CANTIDAD">
          <th mat-header-cell *matHeaderCellDef> Cantidad </th>
          <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td" ></td>
        </ng-container>

        <ng-container matColumnDef="PRECIO_UNITARIO">
          <th mat-header-cell *matHeaderCellDef> Precio Unitario </th>
          <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO_UNITARIO }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"><b>Precio Final</b></td>
        </ng-container>

        <ng-container matColumnDef="PRECIO_TOTAL">
          <th mat-header-cell *matHeaderCellDef> Precio Total </th>
          <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO_TOTAL }} </td>
          <td mat-footer-cell *matFooterCellDef class="border-td"><b>$ {{ getTotalCost() }}</b></td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
      </table>
      <div align="end" class="mt-16">
        <button mat-button color="warn" class="red_primary_font mr-8" mat-dialog-close cdkFocusInitial> Cerrar </button>
        <button mat-button color="primary" matStepperPrevious> Regresar </button>
      </div>
    </mat-step>
e
  </mat-stepper>
</mat-dialog-content>

