{% comment %}
  Renders a bg image

  Usage:
  {% render 'header-bg-image' %}
{% endcomment %}

{% liquid
  assign img_desktop = section.settings.background_image_desktop | image_url
  assign img_mobile = section.settings.background_image_mobile | image_url
  assign video_url = section.settings.background_video_url
%}

{% if video_url != blank %}
  <xo-video-cover
    xo-src='{{ video_url }}'
    class='header-bg-image'
    style='--bg-overlay: {{ section.settings.background_overlay }}; --overlay-opacity: {{ section.settings.overlay_opacity }}'
  ></xo-video-cover>
{% else %}
  {% capture content %}
    {% if section.settings.use_parallax %}
      <xo-parallax xo-lerp-ease='0.4' class='header-bg-image__item'>
        <xo-parallax-scroll
          xo-keyframes="
            {
              '0%': { backgroundPositionY: '200px' },
              '100%': { backgroundPositionY: '-200px' },
            }
          "
          class='header-bg-image__url xo-background-lazyload'
        >
        </xo-parallax-scroll>
      </xo-parallax>
    {% else %}
      <div class='header-bg-image__item'><div class='header-bg-image__url xo-background-lazyload'></div></div>
    {% endif %}
  {% endcapture %}

  {% capture style %}
    {% if img_desktop != blank %}--img-desktop: url("{{ img_desktop | image_url: width: 100 }}");{% endif %}{% if img_mobile != blank %}--img-mobile: url("{{ img_mobile | image_url: width: 100 }}");{% endif %}; --bg-overlay: {{ section.settings.background_overlay }}; --overlay-opacity: {{ section.settings.overlay_opacity }}
  {% endcapture %}

  {% render 'animation', type: section.settings.background_image_animation, duration: 1000, style: style, class: 'header-bg-image', content: content %}
{% endif %}
