{% load i18n l10n catalogue_tags %}

{% with audiobooks=book.get_audiobooks %}
  <div class="c-media__player" id="jp_container_{{ book.pk }}" data-book-slug="{{ book.slug }}">
    <div class="jp-jplayer" data-player="jp_container_{{ book.pk }}"
         data-supplied="oga,mp3"></div>

    <div class="c-player__head">
      <span>&nbsp;</span>
    </div>

    <div class="c-player">
      <div class="c-player__btns">
        <button class="play-prev" data-s-ord="2"><i class="icon icon-prev"></i></button>
        <button class="c-player__btn--md jp-play" data-s-ord="3"><i class="icon icon-play"></i></button>
        <button class="play-next" data-s-ord="4"><i class="icon icon-next"></i></button>
        <div class="c-select speed" data-s-ord="1">
          <ul>
            <li data-speed="2">2×</li>
            <li data-speed="1.75">1.75×</li>
            <li data-speed="1.5">1.5×</li>
            <li data-speed="1.25">1.25×</li>
            <li data-speed="1" class="is-active">1×</li>
            <li data-speed="0.75">0.75×</li>
            <li data-speed="0.5">0.5×</li>
          </ul>
        </div>
      </div>

      <div class="c-player__timeline">
        <div class="c-player__chapters">
          {% if audiobooks.0|length > 1 %}
            <span>
              <span class="only-l">{% trans "Rozdziały" %}</span>
              <span class="only-s">{% trans "Roz." context "rozdziały" %}</span>
            </span>
          {% endif %}
          <ul class="jp-playlist">
            {% localize off %}
            {% for i in audiobooks.0 %}
              <li
                  data-mp3='{{ i.mp3.file.url }}'
                  data-ogg='{{ i.ogg.file.url }}'
                  data-media-id="{{ i.mp3.id }}"
                  data-duration="{{ i.mp3.duration }}"
              >
                {% with extra_info=i.mp3.get_extra_info_json %}
                  <span class="title">
                    {{ i.mp3.part_name }}
                  </span>
                  <span class="attribution">
                    {% trans "Czyta:" %}&nbsp;<span class='artist'>{{ extra_info.artist_name }}</span>,
                    {% trans "reż." %}&nbsp;<span class='director'>{{ extra_info.director_name }}</span>
                  </span>
                  <span class="license">
                    {% if extra_info.license %}{% license_icon extra_info.license %}{% endif %}
                  </span>
                  <span class="project-icon">
                    {% if i.mp3.project_icon %}<img class="project-icon" src="{{ i.mp3.project_icon }}">{% endif %}
                  </span>
                  <span class="project-description">
                    {% if i.mp3.project_description %}{{ i.mp3.project_description }}{% else %}
                      {% with fb=extra_info.funded_by %}
                        {% if fb %}Dofinansowano ze środków: {{ fb }}.{% endif %}
                      {% endwith %}
	            {% endif %}
                  </span>
	        {% endwith %}
              </li>
            {% endfor %}
            {% endlocalize %}
          </ul>
        </div>
        <div class="c-player__info"></div>
        <span>
          <span class="jp-seek-bar">
            <span class="jp-play-bar"></span>
          </span>
        </span>

        <time class="c-player__length">
          <span class="jp-current-time"></span>
          <span class="time-left">
          </span>
          <span class="total-time-left">?</span>
        </time>
      </div>

      <div class="c-player__volume">
        <i class="icon icon-volume jp-mute"></i>
        <span class="jp-volume-bar">
          <span class="jp-volume-bar-value">
          </span>
        </span>
      </div>


    </div>
    <div class="c-media__caption">
      <div class="license"></div>
      <div class="project-logo"></div>
      <div class="content"></div>
    </div>
  </div>
{% endwith %}