{% load i18n %}
{% if audiobooks %}
  <div class="jp-type-playlist">
    <div id="jplayer" class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
         data-supplied="{% if have_oggs %}oga,{% endif %}mp3"></div>
    <div id="jp_container_{{ book.pk }}" class="jp-audio">
      <div class="jp-type-single">
        <span class="title"></span>
        <div class="jp-gui jp-interface">
          <ul class="jp-controls">
            <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
            <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
            <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
            <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
          </ul>
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-volume-bar">
            <div class="jp-volume-bar-value"></div>
          </div>
          <div class="jp-time-holder">
            <div class="jp-current-time"></div>
            <div class="jp-duration"></div>
          </div>
        </div>
        <div class="jp-playlist">
          <ul>
            {% for i in audiobooks %}
              <li data-mp3='{{ i.mp3.file.url }}' data-ogg='{{ i.ogg.file.url }}'>
                <div class='play'>{{ i.mp3.name }}
                  <div class='extra-info'>
                    {% trans "Artist:" %}&nbsp;<span class='artist'>{{ i.mp3.extra_info.artist_name }}</span>,
                    {% trans "director:" %}&nbsp;<span class='director'>{{ i.mp3.extra_info.director_name }}</span>
                  </div>
                </div>
              </li>
            {% endfor %}
          </ul>
        </div>

        <div class="jp-no-solution">
          <span>Update Required</span>
          To play the media you will need to either update your browser to a recent version or update your
          <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
      </div>
    </div>
    <div>
      {% if audiobooks|length > 1 %}
        <a class="play-prev">« {% trans "previous" %}</a>
        {% trans "Part" %} <span class="number">1</span> / {{ audiobooks|length }}
        <a class="play-next">{% trans "next" %} »</a>
      {% endif %}
    </div>
  </div>
{% endif %}