{% load sekizai_tags staticfiles %}
{% addtoblock 'css' %}<link rel="stylesheet" href="{% static 'djangocms_mediaplayer/css/mediaplayer.scss' %}">{% endaddtoblock %}

  <figure class="mediaplayer-container" id="mediaplayer_{{ instance.id }}">
    <audio class="media-element" src="{{ instance.glossary.file.url }}" controls
        {% if instance.glossary.preload %} preload="{{ instance.glossary.preload }}"{% endif %}
        {% if instance.glossary.is_autoplay %} autoplay="true"{% endif %}
        {% if instance.glossary.is_loop %} loop{% endif %}
        {% if instance.glossary.is_muted %} muted{% endif %}>
      <source src="{{ instance.glossary.file.url }}" type="audio/{{instance.glossary.file.extension}}">
      {{ instance.glossary.not_supported_text }}
    </audio>

    <div class="player-controls audio">
      <div><button class="play-btn"><span class="icon icon-state"></span></button></div>
      <div><button class="stop-btn"><span class=""></span></button></div>
      {% if instance.glossary.show_skip_controls %}
        <div><button class="rewind-btn"><span class="icon icon-rewind"></span></button></div>
        <div><button class="fast-forward-btn"><span class="icon icon-fast-forward"></span></button></div>
      {% endif %}
      {% if instance.glossary.show_slide %}
        <div class="slide-container">
          <input type="range" min="0" max="100" value="0" class="slider">
        </div>
      {% else %}
        <div class="progress-container">
          <progress class="progress" value="0" max="1">
            <span class="progress-bar"></span>
          </progress>
        </div>
      {% endif %}
      <div class="playtime-text"><span class="playtime-current">0:00</span> / <span class="playtime-duration">00:00</span></div>
      <div><button class="mute-btn"><span class="icon icon-volume"></span></button></div>
      <div class="volume-slider-container"><input type="range" min="0" max="100" value="100" class="volume-slider"></div>
    </div>
  </figure>

{% addtoblock 'js' %}<script type="application/javascript" src="{% static 'djangocms_mediaplayer/js/mediaplayer.js' %}"></script>{% endaddtoblock %}