{#
/**
 * @file
 * Video preview template.
 *
 * Available variables:
 * - media: The media entity.
 * - source_url: URL to the source video.
 * - poster_url: URL to the poster image.
 * - outputs: Available output URLs.
 * - show_controls: Whether to show video controls.
 */
#}
{% if source_url %}
{% set preview_id = 'ffmpeg-video-preview-' ~ media.id %}
{% set panel_id = preview_id ~ '-panel' %}
<div class="ffmpeg-video-preview">
  {% if outputs|length > 1 %}
    <div class="ffmpeg-output-tabs" role="tablist" aria-label="{{ 'Video output selector'|t }}">
      <button
        id="{{ preview_id }}-tab-source"
        class="ffmpeg-output-tab active"
        data-src="{{ source_url }}"
        role="tab"
        aria-selected="true"
        aria-controls="{{ panel_id }}"
        tabindex="0">
        {{ 'Source'|t }}
      </button>
      {% for type, url in outputs %}
        <button
          id="{{ preview_id }}-tab-{{ loop.index }}"
          class="ffmpeg-output-tab"
          data-src="{{ url }}"
          role="tab"
          aria-selected="false"
          aria-controls="{{ panel_id }}"
          tabindex="-1">
          {{ type|upper }}
        </button>
      {% endfor %}
    </div>
  {% endif %}

  <div
    id="{{ panel_id }}"
    class="ffmpeg-video-preview__panel"
    role="tabpanel"
    {% if outputs|length > 1 %}
      aria-labelledby="{{ preview_id }}-tab-source"
    {% else %}
      aria-label="{{ 'Video preview'|t }}"
    {% endif %}>
    <video
      src="{{ source_url }}"
      {% if poster_url %}poster="{{ poster_url }}"{% endif %}
      {% if show_controls %}controls{% endif %}
      preload="metadata"
      playsinline
    >
      {{ 'Your browser does not support the video tag.'|t }}
    </video>
  </div>

  <div class="ffmpeg-video-controls">
    <span class="ffmpeg-video-time">0:00 / 0:00</span>
  </div>
</div>
{% endif %}
