{#
/**
 * @file
 * CivicTheme Video component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - title: [string] Video title.
 * - has_controls: [boolean] Whether the video should have controls.
 * - sources: [array] Video sources:
 *   Each item contains:
 *   - url: [string] Source URL.
 *   - type: [string] MIME type (like 'video/mp4').
 * - poster: [string] Video poster URL.
 * - width: [string] Video width.
 * - height: [string] Video height.
 * - fallback_text: [string] Message for browsers not supporting HTML5 video.
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 */
#}

{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s'|format(theme_class, modifier_class|default('')) %}

{% if sources is not empty %}
  {% if fallback_text is empty %}
    {% set fallback_text = "Your browser doesn't support HTML5 video." %}
  {% endif %}

  {% set attributes = attributes|default('') %}

  {% if title is not empty %}
    {% set attributes = attributes ~ 'title="' ~ title ~ '"' %}
  {% endif %}

  {% if has_controls %}
    {% set attributes = attributes ~ 'controls=""' %}
  {% endif %}

  {% if poster is not empty %}
    {% set attributes = attributes ~ 'poster="' ~ poster ~ '"' %}
  {% endif %}

  {% if width is not empty %}
    {% set attributes = attributes ~ 'width="' ~ width ~ '"' %}
  {% endif %}

  {% if height is not empty %}
    {% set attributes = attributes ~ 'height="' ~ height ~ '"' %}
  {% endif %}

  <video class="ct-video {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    {% for source in sources %}
      <source src="{{ source.url }}" type="{{ source.type }}"/>
    {% endfor %}
    {{ fallback_text }}
  </video>
{% endif %}
