<div mat-dialog-content>
  <h2 mat-dialog-title>Historial de Cambios</h2>
  
  <table mat-table [dataSource]="dataSource" class="history-table">
    <ng-container matColumnDef="fecha">
      <th mat-header-cell *matHeaderCellDef>Fecha</th>
      <td mat-cell *matCellDef="let item">
        {{ item.FECHA_CAMBIO | date:'dd/MM/yyyy HH:mm' }}
      </td>
    </ng-container>

    <ng-container matColumnDef="tipo">
      <th mat-header-cell *matHeaderCellDef>Tipo</th>
      <td mat-cell *matCellDef="let item">
        <span class="type-badge" [ngClass]="'type-' + item.TIPO.toLowerCase()">
          {{ item.TIPO }}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="cambio">
      <th mat-header-cell *matHeaderCellDef>Cambio</th>
      <td mat-cell *matCellDef="let item">
        {{ getChangeDescription(item) }}
      </td>
    </ng-container>

    <ng-container matColumnDef="comentario">
      <th mat-header-cell *matHeaderCellDef>Comentario</th>
      <td mat-cell *matCellDef="let item">{{ item.COMENTARIO }}</td>
    </ng-container>

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

<div mat-dialog-actions align="end">
  <button mat-button (click)="close()">Cerrar</button>
</div>