{% comment %}
  Renders a slideshow-bg-image

  Accepts:
  - block: {Object} Block Liquid object (required)

  Usage:
  {% render 'slideshow-bg-image', block: block %}
{% endcomment %}

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

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

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