<mat-progress-bar
  mode="indeterminate"
  *ngIf="isLoadingDetails"
  class="loading-bar"
></mat-progress-bar>

<div class="table-container">
  <table mat-table matSort [dataSource]="dataSource" class="contextual-table">
    <ng-container *ngFor="let column of displayedColumns">
      <ng-container [matColumnDef]="column">
        <th mat-header-cell *matHeaderCellDef mat-sort-header class="table-header">
          {{ getColumnDisplayName(column) }}
        </th>
        <td mat-cell *matCellDef="let row" 
           class="table-cell"
           [matTooltip]="getCellTooltip(row, column)"
           matTooltipPosition="above">
          
          <div class="cell-wrapper">
            <!-- Cellule référence : clic ouvre le détail de la référence -->
            <span *ngIf="isReferenceValue(row[column])"
                  class="cell-content reference-cell-link"
                  (click)="openReferenceDetail(row[column], column); $event.stopPropagation()"
                  title="Voir le détail de {{ getFormattedCellValue(row, column) }}">
              {{ getFormattedCellValue(row, column) }}
            </span>
            <!-- Cellule normale : clic ouvre le détail de la ligne -->
            <span *ngIf="!isReferenceValue(row[column])"
                  class="cell-content"
                  [ngClass]="getCellClass(column)"
                  (click)="details(row)">
              {{ getFormattedCellValue(row, column) }}
            </span>
          </div>
        </td>
      </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns" class="header-row"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" 
        class="data-row" 
        [class.clickable]="true"></tr>
  </table>
</div>

<mat-paginator
  [pageSizeOptions]="[5, 10, 25]"
  [pageSize]="10"
  showFirstLastButtons
  class="table-paginator"
  aria-label="Navigation des données contextuelles">
</mat-paginator>
