<div class="page-header">
  <div class="header-content">
    <h1 class="page-title">
      <mat-icon *ngIf="icon">{{ icon }}</mat-icon>
      {{ title }}
    </h1>
    <p class="page-description" *ngIf="description">{{ description }}</p>
  </div>
  
  <!-- Badges/KPIs -->
  <div class="badges-container" *ngIf="badges && badges.length > 0">
    <div class="badge-card" 
         *ngFor="let badge of badges; trackBy: trackByBadge"
         [attr.data-badge-type]="badge.type">
      <div class="badge-icon">
        <mat-icon>{{ badge.icon }}</mat-icon>
      </div>
      <div class="badge-content">
        <div class="badge-value">
          <span *ngIf="!loading">{{ badge.result | number }}</span>
          <mat-spinner *ngIf="loading" diameter="20"></mat-spinner>
        </div>
        <div class="badge-title">{{ badge.title }}</div>
      </div>
    </div>
  </div>
</div>

