<div class="badge-card" 
     [class]="'badge-card--' + size" 
     [ngClass]="getBadgeColorClass()"
     [attr.data-badge-id]="badge?.id">
  
  <!-- Loading State -->
  <div *ngIf="loading" class="badge-card__loading">
    <div class="loading-spinner"></div>
    <span class="loading-text">Chargement...</span>
  </div>

  <!-- Badge Content -->
  <div *ngIf="!loading && badge" class="badge-card__content">
    
    <!-- Header -->
    <div class="badge-card__header">
      <div class="badge-card__icon">
        <i [class]="getIconClass()"></i>
      </div>
      
      <!-- Source Indicator -->
      <div *ngIf="showSource" 
           class="badge-card__source" 
           [ngClass]="getSourceStatusClass()"
           [title]="getSourceText()">
        <span class="source-dot"></span>
      </div>
    </div>

    <!-- Title -->
    <h3 class="badge-card__title" [title]="badge.description">
      {{ badge.title }}
    </h3>

    <!-- Value -->
    <div class="badge-card__value">
      <span class="value-main" 
            [class.value-error]="hasError()">
        {{ badge.formatted_value || badge.value || '0' }}
      </span>
    </div>

    <!-- Error Message -->
    <div *ngIf="hasError()" class="badge-card__error">
      <i class="icon-warning"></i>
      <span>{{ badge.error || 'Service indisponible' }}</span>
    </div>

    <!-- Last Updated -->
    <div *ngIf="badge.last_updated && !hasError()" class="badge-card__updated">
      <small>
        Mis à jour : {{ badge.last_updated | date:'HH:mm' }}
      </small>
    </div>

    <!-- Description (for large size) -->
    <p *ngIf="size === 'large' && badge.description" class="badge-card__description">
      {{ badge.description }}
    </p>
  </div>

  <!-- Error State -->
  <div *ngIf="!loading && !badge" class="badge-card__error-state">
    <i class="icon-warning"></i>
    <span>Badge indisponible</span>
  </div>
</div>