<!-- Header avec statut de santé -->
<div class="dashboard-badges-header" *ngIf="showHealthStatus || error">
  
  <!-- Statut de santé du système -->
  <div *ngIf="showHealthStatus && healthCheck" class="health-status">
    <div class="health-indicator" [class]="'health-' + getHealthStatus()">
      <i class="icon-heart"></i>
      <span class="health-text">{{ getHealthStatusText() }}</span>
    </div>
    
    <div class="health-details" *ngIf="healthCheck.tests">
      <div class="health-metric">
        <span class="metric-label">Isolation DB:</span>
        <i class="icon-check" *ngIf="healthCheck.tests.database_isolation?.passed"></i>
        <i class="icon-warning" *ngIf="!healthCheck.tests.database_isolation?.passed"></i>
      </div>
      
      <div class="health-metric">
        <span class="metric-label">API ESTAIR:</span>
        <i class="icon-check" *ngIf="healthCheck.tests.api_communication?.passed"></i>
        <i class="icon-warning" *ngIf="!healthCheck.tests.api_communication?.passed"></i>
        <span class="latency" *ngIf="healthCheck.tests.api_communication?.latency_ms">
          ({{ healthCheck.tests.api_communication.latency_ms }}ms)
        </span>
      </div>
      
      <div class="health-metric">
        <span class="metric-label">Badges:</span>
        <span class="badge-count">{{ healthCheck.tests.badges_available?.count || 0 }}</span>
      </div>
    </div>
  </div>

  <!-- Message d'erreur global -->
  <div *ngIf="error" class="error-message">
    <i class="icon-warning"></i>
    <span>{{ error }}</span>
    <button class="btn-retry" (click)="refreshBadges()">
      <i class="icon-refresh"></i> Réessayer
    </button>
  </div>
</div>

<!-- Actions -->
<div class="dashboard-actions">
  <div class="dashboard-info">
    <span class="badges-count">{{ badges.length }} badges</span>
    <span class="availability" *ngIf="badges.length > 0">
      Disponibilité: {{ getAvailabilityRate() }}%
    </span>
    <span class="last-update" *ngIf="lastUpdate">
      Mis à jour: {{ getFormattedLastUpdate() }}
    </span>
  </div>

  <div class="action-buttons">
    <button class="btn-refresh" 
            (click)="refreshBadges()" 
            [disabled]="loading"
            [class.loading]="loading">
      <i class="icon-refresh"></i>
      <span>Actualiser</span>
    </button>
  </div>
</div>

<!-- Grid des badges -->
<div class="badges-grid" 
     [class]="'badges-grid--' + badgeSize"
     *ngIf="!loading || badges.length > 0">
  
  <!-- Badges commerciaux -->
  <div class="badges-section">
    <h4 class="section-title">
      <i class="icon-trending-up"></i>
      Commercial
    </h4>
    <div class="badges-row">
      <app-badge-card
        *ngFor="let badge of getBadgesByCategory('commercial'); trackBy: trackByBadgeId"
        [badge]="badge"
        [loading]="loading"
        [showSource]="true"
        [size]="badgeSize">
      </app-badge-card>
    </div>
  </div>

  <!-- Badges financiers -->
  <div class="badges-section">
    <h4 class="section-title">
      <i class="icon-credit-card"></i>
      Financier
    </h4>
    <div class="badges-row">
      <app-badge-card
        *ngFor="let badge of getBadgesByCategory('financier'); trackBy: trackByBadgeId"
        [badge]="badge"
        [loading]="loading"
        [showSource]="true"
        [size]="badgeSize">
      </app-badge-card>
    </div>
  </div>

  <!-- Badges opérationnels -->
  <div class="badges-section">
    <h4 class="section-title">
      <i class="icon-activity"></i>
      Opérationnel
    </h4>
    <div class="badges-row">
      <app-badge-card
        *ngFor="let badge of getBadgesByCategory('operationnel'); trackBy: trackByBadgeId"
        [badge]="badge"
        [loading]="loading"
        [showSource]="true"
        [size]="badgeSize">
      </app-badge-card>
    </div>
  </div>

  <!-- Tous les autres badges -->
  <div class="badges-section" *ngIf="badges.length > 0">
    <h4 class="section-title">
      <i class="icon-grid"></i>
      Tous les badges
    </h4>
    <div class="badges-row badges-row--all">
      <app-badge-card
        *ngFor="let badge of badges; trackBy: trackByBadgeId"
        [badge]="badge"
        [loading]="loading"
        [showSource]="true"
        [size]="badgeSize">
      </app-badge-card>
    </div>
  </div>
</div>

<!-- État de chargement initial -->
<div class="loading-state" *ngIf="loading && badges.length === 0">
  <div class="loading-spinner"></div>
  <h3>Chargement des badges...</h3>
  <p>Communication avec l'API CHAPS ↔ ESTAIR</p>
  
  <!-- Skeleton badges -->
  <div class="badges-grid badges-grid--skeleton">
    <div class="skeleton-badge" *ngFor="let item of [1,2,3,4,5]">
      <div class="skeleton-icon"></div>
      <div class="skeleton-title"></div>
      <div class="skeleton-value"></div>
    </div>
  </div>
</div>

<!-- État vide -->
<div class="empty-state" *ngIf="!loading && badges.length === 0 && !error">
  <i class="icon-grid"></i>
  <h3>Aucun badge disponible</h3>
  <p>Les badges s'afficheront dès qu'ils seront configurés</p>
  <button class="btn-refresh" (click)="refreshBadges()">
    <i class="icon-refresh"></i>
    Recharger
  </button>
</div>