<div id="currently_playing" data-id="{{ currently_playing.id }}"{% if fanart %} data-fanart="{{ fanart|xbmc_image }}"{% endif %}>

  <div class="visibility">
    <ul>
      <li class="close"></li>
      <li class="minimize"></li>
    </ul>
  </div>

  <div class="thumb">
    {% if currently_playing.artist %}
      {% if currently_playing.thumbnail%}
        <img class="albumart" src="{{ itemart|xbmc_image }}">
        <p class="item_info_artist">
      {% else %}
        <p class="item_info">
      {% endif %}

    {% elif currently_playing.showtitle %}
      {% if currently_playing.thumbnail%}
        <img class="episodeart" src="{{ itemart|xbmc_image }}">
        <p class="item_info_show">
      {% else %}
        <p class="item_info">
      {% endif %}

    {% elif currently_playing.title == '' %}
      {% if currently_playing.thumbnail%}
        <img class="episodeart" src="{{ itemart|xbmc_image }}">
        <p class="item_info_show">
      {% else %}
        <p class="item_info">
      {% endif %}

    {% else %}
      {% if currently_playing.thumbnail%}
        <img class="posterart" src="{{ itemart|xbmc_image }}">
        <p class="item_info_movie">
      {% else %}
        <p class="item_info">
      {% endif %}
    {% endif %}

      <span class="playlist" title="View playlist"><strong>Currently playing:</strong></span><br>

      {% if currently_playing.showtitle %}
        <span class="show" data-show="{{ currently_playing.tvshowid }}">{{ currently_playing.showtitle }}</span>
        <span class="separator">-</span>
        <span class="season" data-season="{{ currently_playing.season }}">Season {{ currently_playing.season }}</span>,
        <span class="episode" data-episode="{{ currently_playing.id }}">Episode {{ currently_playing.episode }}
          <span class="separator">-</span>
          "{{ currently_playing.label }}"
        </span>
      {% elif currently_playing.artist %}
        <span class="artist" data-artist="{{ currently_playing.artistid }}">{{ currently_playing.artist }}</span>
        <span class="separator">-</span>
        <span class="album" data-album="{{ currently_playing.albumid }}">{{ currently_playing.album }} ({{ currently_playing.year }})</span>
        <br>{% if currently_playing.track < 10 %}0{% endif %}{{ currently_playing.track }}. {{ currently_playing.label }}
      {% elif currently_playing.type == 'movie' %}
        <span class="movie" data-movie="{{ currently_playing.id }}">{{ currently_playing.label }} ({{ currently_playing.year }})</span>
      {% else %}
        {{ currently_playing.label }}
      {% endif %}
    </p>
  </div>

  <div class="progress" data-progress="{{ percentage_progress }}%">
    <div class="bar">
      <div class="inner" style="width: {{ percentage_progress }}%;"></div>
    </div>
    <div class="current">{{ current_time }}</div>
    <div class="total" data-seconds="{{total_time_seconds}}">{{ total_time }}</div>
  </div>

  <div class="controls">
    <div class="previous" data-command="previous" title="Previous">Previous</div>
    <div class="rewind" data-command="rewind" title="Rewind">Rewind</div>
    <div class="stop" data-command="stop" title="Stop">Stop</div>
    <div class="play_pause" data-command="play_pause" title="Play/Pause">Play/Pause</div>
    <div class="fast_forward" data-command="fast_forward" title="Fast forward">Fast Forward</div>
    <div class="next" data-command="next" title="Next">Next</div>
<!--     
    <div class="option">
    <div class="shuffle{{ ' active' if shuffled }}" data-command="shuffle" title="Shuffle">Shuffle</div>
    <div class="repeat{% if repeat != 'off' %} repeat_{{ repeat }}{% endif %}" data-command="repeat" title="Repeat">Repeat</div>
    <div class="mute{{ ' active' if muted }}" data-command="mute" title="Mute">Mute</div>
    </div>
 -->  
  </div>
  <div class="volume" data-volume="{{ volume }}%">
    <div class="volume-icon"></div>
    <div class="bar">
      <div class="inner" style="height: {{ volume/2 }}px;"></div>
    </div>
  </div>

  {% if currently_playing.plot %}
    <div class="synopsis">
      <h2>
        {% if currently_playing.showtitle %}
          {{ currently_playing.showtitle }} -
          {{ currently_playing.season }}x{{ currently_playing.episode }} -
          "{{ currently_playing.title }}"
        {% else %}
          {{ currently_playing.title }} {{ currently_playing.year }}
        {% endif %}
      </h2>
      <p>{{ currently_playing.plot|truncate(750) }}</p>
    </div>
  {% endif %}

</div>
