<!-- Modern List View Template Integrated Directly -->
<div class="modern-list-view" *ngIf="viewStep === viewStatus.LIST_VIEW_ONE || viewStep === viewStatus.LIST_VIEW_ONE_EMPTY">

  <!-- 1. KPIs/Badges en haut -->
  <div class="kpi-section" *ngIf="generatedBadges">
    <div class="kpi-grid">
      <div class="kpi-card"
           *ngFor="let badge of generatedBadges; let i = index"
           [attr.data-badge-type]="badge.type">
        <div class="kpi-icon" [style.background]="'#' + (i % 2 === 0 ? '4f46e5' : '06b6d4')">
          <mat-icon>{{ badge.icon || 'dashboard' }}</mat-icon>
        </div>
        <div class="kpi-content">
          <div class="kpi-value">
            <span *ngIf="!isLoadingDetails">{{ badge.result || 0 | number:'1.0-0' }}</span>
            <div *ngIf="isLoadingDetails" class="kpi-skeleton"></div>
          </div>
          <div class="kpi-label">{{ badge.title }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 2. Header avec titre et boutons d'action -->
  <div class="page-header">
    <div class="header-content">
      <div class="page-title-section">
        <mat-icon class="title-icon">folder_open</mat-icon>
        <div class="title-text">
          <h1 class="page-title">{{ moduleName | titlecase }}</h1>
          <p class="page-description">Gestion et suivi des {{ moduleName }}</p>
        </div>
      </div>

      <!-- Actions CTA -->
      <div class="header-actions">
        <button mat-raised-button
                color="primary"
                *ngIf="isPermCreate"
                [disabled]="isLoadingDetails"
                (click)="addProject()">
          <mat-icon>add</mat-icon>
          <span>Nouveau</span>
        </button>

        <button mat-raised-button
                class="btn-success"
                *ngIf="isPermExec && listSelected && listSelected.length > 0"
                (click)="execute()"
                [disabled]="!iconEnabled">
          <mat-icon>play_arrow</mat-icon>
          <span>Exécuter</span>
        </button>

        <button mat-raised-button
                class="btn-dark"
                *ngIf="isPermUpdate && listSelected && listSelected.length > 0"
                (click)="clickEdit()">
          <mat-icon>edit</mat-icon>
          <span>Modifier</span>
        </button>

        <button mat-raised-button
                color="warn"
                *ngIf="isPermDel && listSelected && listSelected.length > 0"
                (click)="deleteSelected()">
          <mat-icon>delete</mat-icon>
          <span>Supprimer</span>
        </button>

        <button mat-raised-button
                class="btn-secondary"
                *ngIf="isPermReporting"
                (click)="exportCsv()">
          <mat-icon>download</mat-icon>
          <span>Exporter</span>
        </button>

        <button mat-icon-button
                (click)="refreshList()"
                matTooltip="Actualiser">
          <mat-icon>refresh</mat-icon>
        </button>
      </div>
    </div>
  </div>

  <!-- 3. Toolbar de filtres et recherche -->
  <div class="filters-toolbar">
    <div class="toolbar-left">
      <!-- Informations de sélection -->
      <div class="selection-info" *ngIf="listSelected && listSelected.length > 0">
        <mat-icon>check_circle</mat-icon>
        <span>{{ listSelected.length }} sélectionné(s)</span>
        <button mat-icon-button (click)="clearSelection()">
          <mat-icon>close</mat-icon>
        </button>
      </div>

      <!-- Contrôles de vue -->
      <div class="view-controls">
        <button mat-icon-button class="active" matTooltip="Vue tableau">
          <mat-icon>table_view</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Vue cartes">
          <mat-icon>view_module</mat-icon>
        </button>

        <button mat-stroked-button
                [class.active]="ishowFilter"
                (click)="showFilter()">
          <mat-icon>filter_list</mat-icon>
          <span>Filtres</span>
          <span *ngIf="activeFiltersCount > 0" class="filter-count-badge">{{activeFiltersCount}}</span>
        </button>
      </div>
    </div>

    <div class="toolbar-right">
      <!-- Recherche rapide -->
      <div class="quick-search">
        <mat-icon>search</mat-icon>
        <input type="text"
               placeholder="Rechercher..."
               [(ngModel)]="searchQuery"
               (input)="onQuickSearch($event)"
               (keyup.enter)="onQuickSearch($event)">
      </div>
    </div>
  </div>

  <!-- Zone Tableau AG-Grid Moderne -->
  <div class="table-container" style="height: 600px;">
    <!-- Loader pendant le chargement initial -->
    <div *ngIf="isLoadingDetails" class="loading-state" style="position: absolute; z-index: 1000; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,0.8);">
      <mat-spinner diameter="50"></mat-spinner>
      <p>Chargement des données...</p>
    </div>

    <!-- AG-Grid toujours présent -->
    <ag-grid-angular
      #agGrid
      class="ag-theme-alpine"
      style="width: 100%; height: 100%;"
      [rowData]="rowData"
      [columnDefs]="columnDefAgrid || []"
      [defaultColDef]="defaultColDef"
      [gridOptions]="gridOptions"
      (gridReady)="onGridReady($event)"
      (selectionChanged)="onSelectionChanged($event)"
      (filterChanged)="onFilterChanged($event)"
      (cellClicked)="onCellClicked($event)"
      (rowDoubleClicked)="vueDetails($event.data)">
    </ag-grid-angular>
    
    <!-- Pagination personnalisée -->
    
    <div class="custom-pagination">
      <div class="pagination-info">
        <span>
          {{ (paginationService.getCurrentState().page - 1) * paginationService.getCurrentState().size + 1 }} -
          {{ Math.min(paginationService.getCurrentState().page * paginationService.getCurrentState().size, paginationService.getCurrentState().totalFiltered) }}
          sur {{ paginationService.getCurrentState().totalFiltered }} éléments
        </span>
      </div>
      
      <div class="pagination-controls">
        <button mat-icon-button 
                [disabled]="!paginationService.getCurrentState().hasPreviousPage" 
                (click)="goToFirstPage()"
                matTooltip="Première page">
          <mat-icon>first_page</mat-icon>
        </button>
        <button mat-icon-button 
                [disabled]="!paginationService.getCurrentState().hasPreviousPage" 
                (click)="goToPreviousPage()"
                matTooltip="Page précédente">
          <mat-icon>chevron_left</mat-icon>
        </button>
        
        <span class="page-indicator">
          Page {{ paginationService.getCurrentState().page }} sur {{ paginationService.getCurrentState().totalPages }}
        </span>
        
        <button mat-icon-button 
                [disabled]="!paginationService.getCurrentState().hasNextPage" 
                (click)="goToNextPage()"
                matTooltip="Page suivante">
          <mat-icon>chevron_right</mat-icon>
        </button>
        <button mat-icon-button 
                [disabled]="!paginationService.getCurrentState().hasNextPage" 
                (click)="goToLastPage()"
                matTooltip="Dernière page">
          <mat-icon>last_page</mat-icon>
        </button>
      </div>
    </div>
    
    <!-- État vide -->
    <div class="empty-state" *ngIf="!isLoadingDetails && (!rowData || rowData.length === 0)">
      <div class="empty-content">
        <mat-icon class="empty-icon">folder_open</mat-icon>
        <h3 class="empty-title">Aucune donnée disponible</h3>
        <p class="empty-description">
          Il n'y a actuellement aucun projet à afficher dans ce module.
        </p>
        <button class="empty-action" 
                (click)="addProject()">
          <mat-icon>add</mat-icon>
          <span>Créer le premier projet</span>
        </button>
      </div>
    </div>
  </div>

</div>

<!-- Loading State - Simple et fonctionnel -->
<div class="simple-loading" *ngIf="viewStep === viewStatus.LOADING" style="
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
">
  <div style="text-align: center;">
    <div style="
      width: 40px;
      height: 40px;
      border: 4px solid #f3f4f6;
      border-top: 4px solid #206bc4;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 20px;
    "></div>
    <h3 style="margin: 0 0 10px; color: #1e293b; font-family: Inter, sans-serif;">Chargement...</h3>
    <p style="margin: 0; color: #64748b; font-family: Inter, sans-serif;">Récupération des {{ moduleName }}</p>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>

<!-- La vue empty state est maintenant fusionnée avec la vue principale ci-dessus -->

<!-- Panneau de filtres avancés -->
<app-filter-panel
  [fields]="fieldDefinitions"
  [initialConstraints]="getConstraintsForFilterPanel()"
  [(visible)]="showFilterPanel"
  (filtersApplied)="onFiltersApplied($event)"
  (filtersCleared)="onFiltersCleared()">
</app-filter-panel>