{% set DEFAULT_VIDEO_SETTINGS = {
  className: '',
  hasCustomControls: false,
  sources: [
    {
      src: '',
      type: ''
    }
  ],
  attrs: {},
  speedModes: [
    { value: 0.5, text: '0.5' },
    { value: 0.75, text: '0.75' },
    { value: 1, text: 'Normal' },
    { value: 1.25, text: '1.25' },
    { value: 1.5, text: '1.5' },
    { value: 2, text: '2' }
  ]
} %}

{% macro Video(settings = {}) %}
  {% set settings = merge(DEFAULT_VIDEO_SETTINGS, settings) %}
  {% set directive = 'x-video' if settings.hasCustomControls else '' %}
  {% set controlsId = unique() %}

  <div class="video {{ settings.className }}" {{ directive }} >
    <video
      class="video__element"
      {{ Helpers.setAttributes(settings.attrs) }}
      {{ Helpers.setAttr('x-bind', 'videoElement' if settings.hasCustomControls) }}
    >
      {% for source in settings.sources %}
        <source src="{{ source.src }}" type="{{ source.type }}"></source>
      {% endfor %}
    </video>
    {% if settings.hasCustomControls %}
      <div class="video__playback-icons-wrapper" x-bind="playbackAnimationWrapper">
        <span class="video__playback-icon-play">
          {{ Helpers.svg('icons/play-arrow') }}
        </span>
        <span class="video__playback-icon-pause">
          {{ Helpers.svg('icons/pause') }}
        </span>
      </div>
      <div class="video__controls" x-video:controls>
        <div class="video__actions">
          <div class="video__left-actions">
            <button
              class="video__play-button"
              data-title-pause="Pause (k)"
              data-title-play="Play (k)"
              x-bind="playButton"
            >
              <span class="video__play-icon" x-bind="playIcon">
                {{ Helpers.svg('icons/play-arrow') }}
              </span>
              <span class="video__pause-icon" x-bind="pauseIcon" x-cloak>
                {{ Helpers.svg('icons/pause') }}
              </span>
            </button>
            <div class="video__time-display">
              <span>
                <time class="video__time-elapsed" x-bind="timeElapsed"></time>
                <span class="vide__time-separator">/</span>
                <time class="video__time-duration" x-bind="timeDuration"></time>
              </span>
            </div>
          </div>
          <div class="video__right-actions">
            <div class="video__volume-area">
              <div class="video__volume-slider">
                <input class="video__volume-range" type="range" min="0" max="100" x-bind="volume">
              </div>
              <button class="video__volume-button" x-bind="volumeButton">
                <span class="video__volume-mute-icon">
                  {{ Helpers.svg('icons/volume-mute') }}
                </span>
                <span class="video__volume-down-icon">
                  {{ Helpers.svg('icons/volume-down') }}
                </span>
                <span class="video__volume-up-icon">
                  {{ Helpers.svg('icons/volume-up') }}
                </span>
              </button>
            </div>
            <button class="video__fullscreen-button" x-bind="fullscreenButton" x-cloak>
              <span class="video__fullscreen-icon">
                {{ Helpers.svg('icons/fullscreen') }}
              </span>
              <span class="video__fullscreen-exit-icon">
                {{ Helpers.svg('icons/fullscreen-exit') }}
              </span>
            </button>
            <div class="video__settings">
              <button class="video__settings-button" data-dropdown="{{ 'video-settings-' + controlsId }}">
                {{ Helpers.svg('icons/more-vertical') }}
              </button>

              {% call Dropdown({
                className: 'video__settings-dropdown',
                dataDropdown: 'video-settings-' + controlsId
              }) %}
                <menu class="video__settings-list">
                  <li>
                    <a class="video__settings-option" x-bind="downloadButton" download>
                      <span class="video__settings-icon">
                      {{ Helpers.svg('icons/download') }}
                    </span>
                      <span class="video__settings-name">Download</span>
                    </a>
                  </li>
                  <li>
                    <button class="video__settings-option" data-dropdown="{{ 'video-speed-' + controlsId }}">
                      <span class="video__settings-icon">
                      {{ Helpers.svg('icons/video-speed') }}
                    </span>
                      <span class="video__settings-name">Playback speed</span>
                    </button>
                  </li>
                </menu>
              {% endcall %}

              {% call Dropdown({
                className: 'video__speed-modes-dropdown',
                dataDropdown: 'video-speed-' + controlsId
              }) %}
                <menu class="video__speed-modes">
                  {% for item in settings.speedModes %}
                    <li>
                      <button value="{{ item.value }}" class="video__speed-mode-option" x-bind="speedModeButton">
                        <span class="video__speed-mode-text">{{ item.text }}</span>
                      </button>
                    </li>
                  {% endfor %}
                </menu>
              {% endcall %}
            </div>
          </div>
        </div>
        <div class="video__timeline">
          <progress x-bind="progress" class="video__progress-bar"></progress>
          <input type="range" class="video__seek" x-bind="seek">
          <span class="video__seek-tooltip" x-bind="seekTooltip">00:00</span>
        </div>
      </div>
    {% endif %}
  </div>
{% endmacro %}