<div class="card-grid">
    @for (stream of streams; track stream) {
  
      <div
        class="stream-card"
        [class.disabled]="!isLive(stream)"
        (click)="isLive(stream) && select(stream)"
      >
  
        <div class="card-thumbnail">
          <img [src]="streamThumbnails[stream] || 'assets/images/default.png'" />
        </div>
  
        <div class="card-info">
  
          @if (isLive(stream)) {
  
            <div class="live-badge">
              <img src="assets/images/livePlay.png" />
            </div>
  
          } @else {
  
            <div class="coming-soon">
              Go live at {{ startTime(stream) }}
            </div>
  
          }
  
        </div>
  
        <div class="card-title">
          {{ streamTitles[stream] || stream }}
        </div>
  
      </div>
  
    }
  </div>