<section
    class="external-playback-dock"
    [class.external-playback-dock--compact]="compact()"
    [class.external-playback-dock--error]="session().status === 'error'"
>
    <button
        type="button"
        class="external-playback-dock__artwork"
        [class.external-playback-dock__artwork--interactive]="
            artworkInteractive()
        "
        [disabled]="!artworkInteractive()"
        [attr.aria-label]="
            artworkInteractive() ? 'Open in playlist' : null
        "
        (click)="onArtworkClick()"
    >
        @if (showArtwork()) {
            <img
                [src]="artworkUrl()"
                [alt]="session().title"
                loading="lazy"
                (error)="onArtworkError()"
            />
        } @else {
            <div class="external-playback-dock__placeholder">
                <mat-icon>{{ artworkPlaceholderIcon() }}</mat-icon>
            </div>
        }
    </button>

    <div class="external-playback-dock__meta">
        <div class="external-playback-dock__title">{{ session().title }}</div>
        <div class="external-playback-dock__status">
            <span class="external-playback-dock__chip">{{ playerLabel() }}</span>
            <span
                class="external-playback-dock__status-separator"
                aria-hidden="true"
                >·</span
            >
            @if (showSpinner()) {
                <mat-spinner diameter="12" strokeWidth="2"></mat-spinner>
            } @else if (showStatusIcon()) {
                <mat-icon class="external-playback-dock__status-icon">{{
                    statusIcon()
                }}</mat-icon>
            }
            <span class="external-playback-dock__status-text">{{
                statusLabel()
            }}</span>
        </div>
    </div>

    <div class="external-playback-dock__actions">
        @if (showCloseButton()) {
            <button
                type="button"
                mat-button
                class="external-playback-dock__button"
                (click)="closeClicked.emit()"
            >
                <mat-icon>stop_circle</mat-icon>
                @if (!compact()) {
                    <span>{{
                        'WORKSPACE.SHELL.EXTERNAL_PLAYBACK_CLOSE' | translate
                    }}</span>
                }
            </button>
        }
    </div>
</section>
