<script id="metadataTmpl" data-ui-template type="text/ractive">
{% raw %}
<div class="lo-single metadata-panel cf">
  <Carousel activeSlide="{{ activeSlide }}">
    {{#nowAndNext.1}}
    <div class="carousel-item">
      <div class="cf metadata md-prog">
        {{#image}}
          <img class="md-img"
               src="{{ templateUrl.replace('$recipe', '272x153') }}" />
        {{/image}}
        <p class="md-primary">{{ brand }}</p>
        <p class="md-secondary">{{ episode }}</p>
      </div>
    </div>
    {{/nowAndNext.1}}
    {{#nowPlaying}}
    <div class="carousel-item">
      <div class="cf metadata md-track">
        {{#contributions.0}}
          {{#image_pid}}
          <img class="md-img"
               src="http://ichef.bbci.co.uk/images/ic/272x153/{{image_pid}}" />
          {{/image_pid}}
        {{/contributions.0}}
        <p class="md-primary">{{ title }}</p>
        <p class="md-secondary">{{ artist }}</p>
      </div>
    </div>
    {{/nowPlaying}}
  </Carousel><!-- .md-items -->

  <a class="track {{ nowPlaying ? 'is-available' : 'is-unavailable' }}" on-tap="track-display">
    <i></i>
    <span>Now playing</span>
  </a>

</div><!-- .metadata-panel -->
{% endraw %}
</script>

<script id="metadataTmpl" data-ui-template type="text/ractive">
{% raw %}
<div class="lo-single metadata-panel cf">
  <Carousel activeSlide="{{ activeSlide }}">
    {{#nowAndNext.0}}
    <div class="carousel-item">
      <div class="cf metadata md-prog">
        {{#image}}
          <img class="md-img"
               src="{{ templateUrl.replace('$recipe', '272x153') }}" />
        {{/image}}
        <p class="md-primary">{{ brand }}</p>
        <p class="md-secondary">{{ episode }}</p>
      </div>
    </div>
    {{/nowAndNext.0}}
    {{#nowPlaying}}
    <div class="carousel-item">
      <div class="cf metadata md-track">
        {{#contributions.0}}
          {{#image_pid}}
          <img class="md-img"
               src="http://ichef.bbci.co.uk/images/ic/272x153/{{image_pid}}" />
          {{/image_pid}}
        {{/contributions.0}}
        <p class="md-primary">{{ title }}</p>
        <p class="md-secondary">{{ artist }}</p>
      </div>
    </div>
    {{/nowPlaying}}
  </Carousel><!-- .md-items -->

  <a class="track {{ nowPlaying ? 'is-available' : 'is-unavailable' }}" on-tap="track-display">
    <i></i>
    <span>Now playing</span>
  </a>

</div><!-- .metadata-panel -->
{% endraw %}
</script>

Fix bug where Next programme shown in web UI instead of Now programme
Fix bug where Next programme shown in web UI instead of Now programme
