<article class="panel playlist-card" [ngClass]="statusClass$ | async">
  <p class="panel-heading playlist-heading is-flex is-justify-content-space-between" (click)="toggleCollapse(playlist.id)">
    <span class="playlist-title">
      <i class="is-clickable fa-solid"
         [ngClass]="playlist.collapsed ? 'fa-caret-down' : 'fa-caret-right'"></i>&nbsp;

      <span class="history-label">{{ playlist.isTrack ? 'track' : 'playlist' }}</span>&nbsp;

      <span *ngIf="playlist.error; else noErrorTemplate" class="is-size-6 has-text-weight-medium">
        {{playlist.error}}
      </span>

      <ng-template #noErrorTemplate>
        <span class="is-size-6 has-text-weight-semibold">{{playlist.name}}</span>
      </ng-template>
    </span>

    <span class="playlist-actions" (click)="$event.stopPropagation()">
      <span *ngIf="!playlist.error" class="progress-text">
        {{trackCompletedCount$ | async}}/{{trackCount$ | async}}
      </span>

      <span *ngIf="(trackErrorCount$ | async) as errors" class="error-count" [class.is-hidden]="errors === 0">
        {{errors}} failed
      </span>

      <a [href]="playlist.spotifyUrl"
         target="_blank"
         class="has-text-black"
         title="Open Spotify URL">
        <i class="fa-brands fa-spotify"></i>
      </a>

      <ng-container *ngIf="!playlist.isTrack">
        <i class="fa-solid is-clickable hover-icon"
           [ngClass]="playlist.active ? 'fa-toggle-on' : 'fa-toggle-off'"
           [title]="playlist.active ? '[ON]: Unsubscribe from playlist changes?' : '[OFF]: Subscribe to playlist changes?'"
           (click)="toggleActive(playlist.id, playlist.active)">
        </i>
      </ng-container>

      <i class="fa-solid fa-repeat is-clickable hover-icon"
         title="Retry failed tracks"
         (click)="retryFailed(playlist.id)">
      </i>

      <i class="fa-solid fa-xmark is-clickable hover-icon"
         title="Remove playlist from list"
         (click)="delete(playlist.id)">
      </i>
    </span>
  </p>

  <div class="progress-shell">
    <div class="progress-fill" [style.width.%]="progressPercent$ | async"></div>
  </div>

  <p class="progress-caption">
    <span>{{progressPercent$ | async}}% complete</span>
    <span *ngIf="playlist.active">subscribed</span>
  </p>

  <ng-container *ngIf="playlist.collapsed">
    <app-track-list [playlistId]="playlist.id"></app-track-list>
  </ng-container>
</article>
