{#
/**
 * @file
 * HEADER paragraph template.
 *
 * @todo replace current parallax/video libraries with ONE single library,
 *       that supports both images and video!
 */
#}
{%
set classes = [
  'paragraph',
  parade.enable_parallax ? 'paragraph--parallax',
  'paragraph--type--' ~ paragraph.bundle|clean_class,
  view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
]
%}

<section{{ attributes.addClass(classes) }} >

  {% if view_mode != 'preview' %}
    <div class="bg-wrapper bg-fullsize">

      {% if parade.background.type == 'image' %}
        {# For responsive parallax effect and fixed height, we need this wrapper #}
        {% if parade.enable_parallax %}
        <div class="bg-fullsize bg-parallax">
        {% endif %}
          <div class="bg-image bg-fullsize" style="background-image: url({{- parade.background.url -}});"></div>
        {% if parade.enable_parallax %}
        </div>
        {% endif %}

      {% elseif parade.background.type == 'video' %}
        <video class="bg-video bg-fullsize{{ parade.enable_parallax ? ' bg-parallax' }}" autoplay muted loop playsinline>
          <source src="{{ parade.background.url }}" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
        </video>
      {% endif %}
    </div>
  {% endif %}

  <div class="paragraph-inner">
    {{ content }}
  </div>
</section>