<h1>Your shower tracklist</h1>

<spinner *ngIf="!loaded"></spinner>

<label
  class="mdl-button mdl-js-button mdl-js-ripple-effect shuffle-checkbox-label"
  for="shuffle-checkbox"
  >
  <label class="mdl-checkbox mdl-js-checkbox">
    <input
      type="checkbox"
      id="shuffle-checkbox"
      class="mdl-checkbox__input shuffle-checkbox"
      [checked]="playback?.shuffle"
      (change)="toggleShuffle()"
      >
    <span class="mdl-checkbox__label">Shuffle</span>
  </label>
</label>

<div *ngIf="loaded" class="tracks">
  <div
    *ngIf="selectedPlaylist?.tracklist?.length < selectedPlaylist?.tracks"
    class="missing-tracks"
    >
    Only the most recent 100 tracks are available right now.
  </div>

  <div
    *ngIf="selectedPlaylist?.tracks == 0"
    class="no-tracks"
    >
    This playlist is empty.
  </div>

  <ul>
    <li *ngFor="let track of selectedPlaylist.tracklist; let i=index">
    <div class="position">{{ (i+1) }}</div>
      <span class="title">&ldquo;{{ track.title }}&rdquo;</span> by {{ track.artists[0] }}
    </li>
  </ul>
</div>



<h1>Your shower tracklist</h1>

<spinner *ngIf="!loaded"></spinner>

<label
  class="mdl-button mdl-js-button mdl-js-ripple-effect shuffle-checkbox-label"
  for="shuffle-checkbox"
  >
  <label class="mdl-checkbox mdl-js-checkbox">
    <input
      type="checkbox"
      id="shuffle-checkbox"
      class="mdl-checkbox__input shuffle-checkbox"
      [checked]="playback?.shuffle"
      (change)="toggleShuffle()"
      >
    <span class="mdl-checkbox__label">Shuffle</span>
  </label>
</label>

<div *ngIf="loaded" class="tracks">
  <div
    *ngIf="selectedPlaylist?.tracklist?.length < selectedPlaylist?.tracks"
    class="missing-tracks"
    >
    Only the first 100 tracks are available right now.
  </div>

  <div
    *ngIf="selectedPlaylist?.tracks == 0"
    class="no-tracks"
    >
    This playlist is empty.
  </div>

  <ul>
    <li *ngFor="let track of selectedPlaylist.tracklist; let i=index">
    <div class="position">{{ (i+1) }}</div>
      <span class="title">&ldquo;{{ track.title }}&rdquo;</span> by {{ track.artists[0] }}
    </li>
  </ul>
</div>



Fix wording of first-100-tracks message.
Web: Fix wording of first-100-tracks message.
