<div class="whats-on-show" aria-live="polite">
  <NyprMOnAirImage
    @stream={{this.nowPlaying.stream}}
    @show={{this.nowPlaying.show}}
    data-action="Clicked show image: main-player"
    data-label={{this.nowPlaying.stream.name}}
    title={{this.nowPlaying.stream.name}}
    @playItemId={{this.nowPlaying.stream.slug}}
  />

  <div class="whats-on-live-indicator">
    <div class="whats-on-live-indicator-wrapper">
      <div class="whats-on-live-indicator-text" aria-hidden="true">live</div>
      <div class="whats-on-live-indicator-dot pulse"></div>
    </div>
    <div class="whats-on-live-indicator-time">{{formatted-time-range this.nowPlaying.currentAiring.startTime this.nowPlaying.currentAiring.endTime}}</div>
  </div>

  <h2 class="whats-on-show-title" data-test-element="show-title">
    <a target="_blank" href={{@levelOneLink}}>
      {{#if nowPlaying.show.title}}
        {{nowPlaying.show.title}}
      {{else}}
        {{nowPlaying.stream.name}}
      {{/if}}
    </a>
  </h2>

  <div class="whats-on-show-description" data-test-element="show-description">
    {{{strip-html this.nowPlaying.show.tease}}}
  </div>

  <NyprMPlayButton
          class="text mod-main-page"
          data-action="Clicked Play/Pause Stream: main-player"
          data-label={{this.nowPlaying.stream.name}}
          title={{this.nowPlaying.stream.name}}
          @playItemId={{this.nowPlaying.stream.slug}}
          @playerLabel="main player"
          @textMode={{true}}
          @label="Listen Live"
          @altWhilePaused="Listen Live, Play"
          @altWhilePlaying="Listen Live, Pause"
  />
</div>

{{#if displayEpisode}}
  {{organism/whats-on/episode
    description=this.nowPlaying.stream.currentShow.description
    showTitle=this.nowPlaying.stream.currentShow.show_title
    episodeTitle=this.nowPlaying.stream.currentShow.title
    episodeLink=@levelThreeLink
  }}
{{/if}}

<div class='whats-on-right'>
  {{#if this.nowPlaying.showHost}}
  <div class="whats-on-right__people">
    {{#if this.nowPlaying.showHost.image}}
      <img src="{{this.nowPlaying.showHost.image.url}}" style="width: 100px; height: 100px; object-fit: cover; border-radius: 9999px;" class="person-avatar" />
    {{/if}}
    <a href="https://www.wnyc.org{{this.nowPlaying.showHost.url}}" target="_blank" class="person-name">{{this.nowPlaying.showHost.name}}</a>
  </div>
  {{/if}}

  <div class="whats-on-right__social">
    {{#if this.nowPlaying.showSocialLinks as |socialLinks|}}
      <NyprMSocialFollow @label="Connect with the show!" as |SocialNetwork|>
        {{#each this.nowPlaying.showSocialLinks as |sl|}}
          {{#if (eq sl.title 'twitter')}}
            <SocialNetwork.twitter @href={{sl.href}} />
          {{/if}}
          {{#if (eq sl.title 'facebook')}}
            <SocialNetwork.facebook @href={{sl.href}} />
          {{/if}}
          {{#if (eq sl.title 'instagram')}}
            <SocialNetwork.instagram @href={{sl.href}} />
          {{/if}}
        {{/each}}
      </NyprMSocialFollow>
    {{/if}}
  </div>

</div>

{{yield}}

