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


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

  <div class="player-controls" {% if not instance.show_controls %} style="display:none"{% endif %}>
    <div><button class="play-btn"><span class="icon icon-state"></span></button></div>
    <div><button class="stop-btn"><span class="icon icon-stop"></span></button></div>
    {% if instance.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.show_slide %}
      <div class="slide-container">
        <input type="range" min="0" max="1" 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><button class="fullscreen-btn"><span class="icon icon-fullscreen"></span></button></div>
  </div>
</figure>

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