<!-- status-card.component.html -->
<div class="status-card-container">
  <div class="stat-card" *ngFor="let stat of stats">
    <h3 class="stat-title">{{ stat.title }}</h3>
    <div class="stat-value">{{ stat.value }}</div>
    <div class="stat-change" [class.up]="stat.trend === 'up'" [class.down]="stat.trend === 'down'">
      {{ stat.change }}
      <svg width="12" height="12" viewBox="0 0 24 24" fill="none">
        <path *ngIf="stat.trend === 'up'" d="M12 4L12 20M12 4L18 10M12 4L6 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
        <path *ngIf="stat.trend === 'down'" d="M12 20L12 4M12 20L18 14M12 20L6 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
  </div>
</div>
