@if (active) {
  <div>
    <form (submit)="search()">
      <mat-card>
        <mat-card-header>
          <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
        </mat-card-header>
        @if (!checking) {
          @if (currentTrack) {
            <mat-card-title-group>
              @if (getImageUrl(currentTrack)) {
                <img mat-card-sm-image [src]="getImageUrl(currentTrack)">
              }
              <mat-card-title><small>{{'jukebox.current' | i18n}}</small></mat-card-title>
              <mat-card-title>{{currentTrack.name}}</mat-card-title>
              <mat-card-subtitle>
                @for (artist of currentTrack.artists; track artist; let i = $index) {
                  <span>
                    {{artist.name}}@if ((i+1) < currentTrack.artists.length) {
                    <span>, </span>
                  }
                </span>
              }
            </mat-card-subtitle>
          </mat-card-title-group>
        }
        <mat-card-content>
          <mat-divider></mat-divider>
          <br />
          <mat-form-field>
            <mat-label>{{'jukebox.search' | i18n}}</mat-label>
            <input matInput [formControl]="searchFormControl"  >
          </mat-form-field>
        </mat-card-content>
        <mat-card-actions>
          <a mat-raised-button type="submit"
            [disabled]="!searchFormControl.value || timeout > 0 || searchDisabled">
            <mat-icon inline="true">{{'jukebox.search.icon' | i18n}}</mat-icon>
            {{'jukebox.search.submit' | i18n}}
          </a>
        </mat-card-actions>
        <mat-card-footer>
          <a (click)="check()" class="help-button" mat-fab color="accent">
            <mat-icon>refresh</mat-icon>
          </a>
        </mat-card-footer>
      }
      @if (checking) {
        <mat-card-actions>
          <mat-progress-bar mode="indeterminate"></mat-progress-bar>
        </mat-card-actions>
      }
    </mat-card>
  </form>
  @if (timeout) {
    <p>{{'jukebox.timeout' | i18n:timeout}}</p>
  }
  @if (searchResult && searchResult.items) {
    <div>
      @for (track of searchResult.items; track track; let i = $index) {
        <mat-card class="track" (click)="queue(track)">
          <mat-card-title-group>
            @if (getImageUrl(track)) {
              <img mat-card-sm-image [src]="getImageUrl(track)">
            }
            <mat-card-title>{{track.name}}</mat-card-title>
            <mat-card-subtitle>
              @for (artist of track.artists; track artist; let i = $index) {
                <span>
                  {{artist.name}}@if ((i+1) < track.artists.length) {
                  <span>, </span>
                }
              </span>
            }
          </mat-card-subtitle>
        </mat-card-title-group>
      </mat-card>
    }
    @if (searchResult && ((searchResult.offset + searchResult.limit) < searchResult.total)) {
      <mat-card>
        <mat-card-actions>
          <a mat-button (click)="searchMore()"> {{'jukebox.search.more' | i18n}}</a>
        </mat-card-actions>
      </mat-card>
    }
  </div>
}
</div>
}

@if (wait) {
  <mat-card class="accent">
    <mat-card-header>
      <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
      <mat-card-subtitle>{{'jukebox.wait' | i18n}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      @if (currentTrack) {
        <mat-card-title-group>
          @if (getImageUrl(currentTrack)) {
            <img mat-card-sm-image [src]="getImageUrl(currentTrack)">
          }
          <mat-card-title><small>{{'jukebox.current' | i18n}}</small></mat-card-title>
          <mat-card-title>{{currentTrack.name}}</mat-card-title>
          <mat-card-subtitle>
            @for (artist of currentTrack.artists; track artist; let i = $index) {
              <span>
                {{artist.name}}@if ((i+1) < currentTrack.artists.length) {
                <span>, </span>
              }
            </span>
          }
        </mat-card-subtitle>
      </mat-card-title-group>
    }
    @if (timeout) {
      <p>{{'jukebox.timeout' | i18n:timeout}}</p>
    }
  </mat-card-content>
  <mat-card-actions>
  </mat-card-actions>
</mat-card>
}

@if (unavailable) {
  <mat-card class="warn">
    <mat-card-header>
      <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
      <mat-card-subtitle>{{'jukebox.unavailable' | i18n}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>{{'jukebox.unavailable.hint' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
    </mat-card-actions>
  </mat-card>
}

@if (forbidden) {
  <mat-card>
    <mat-card-header>
      <mat-card-title>{{'jukebox' | i18n}}</mat-card-title>
      <mat-card-subtitle>{{'jukebox.forbidden' | i18n}}</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
      <p>{{'jukebox.forbidden.hint' | i18n}}</p>
    </mat-card-content>
    <mat-card-actions>
    </mat-card-actions>
  </mat-card>
}