@if (hasStream()) {
  <div class="media-player" role="region" aria-label="Live radio stream">
    <div class="media-player__inner">
      <button
        class="media-player__btn"
        type="button"
        (click)="isPlaying() ? stop() : play()"
        [attr.aria-label]="isPlaying() ? 'Stop stream' : 'Play stream'"
        [attr.aria-pressed]="isPlaying()"
      >
        @if (isPlaying()) {
          <span class="media-player__icon media-player__icon--stop">&#9632;</span>
        } @else {
          <span class="media-player__icon media-player__icon--play">&#9658;</span>
        }
      </button>

      @if (isPlaying()) {
        <span class="media-player__live-dot" aria-hidden="true"></span>
        <span class="media-player__live-label">LIVE</span>
        <span class="media-player__separator" aria-hidden="true">|</span>
      }

      <div class="media-player__text" role="status" aria-live="polite">
        <span class="media-player__marquee">{{ displayText() }}</span>
      </div>
    </div>
  </div>
}