{% comment %}
  Renders a slideshow component

  Accepts:
  - slides: <slideshow-slide>[] -- the slides of the slideshow
  - ref: {String} (optional) -- the ref of the slideshow component
  - class: {String} (optional) -- HTML class attribute of the slideshow component
  - header: {HTML} (optional) -- the header of the slideshow component
  - controls: {HTML} (optional) -- the controls of the slideshow component
  - style: {String} (optional) -- HTML style attribute of the slideshow component
  - autoplay: {Boolean} (optional) -- whether the slideshow will autoplay
  - autoplay_speed: {Integer} (optional) -- the speed of the slideshow autoplay
  - auto_hide_controls: {Boolean} (optional) -- whether to hide slideshow-controls when the scroller is smaller than the viewport
  - infinite: {Boolean} (optional) -- whether the slideshow will loop
  - initial_slide: {Integer} (optional) -- the index of the initial slide
  - slideshow_gutters: {"start" | "end" | "start end"} (optional) -- the gutter positions to render. Set width with CSS variables --gutter-slide-width
  - slide_count: {Integer} -- the total number of slides
  - slide_size: {String} (optional) -- the height of the slides
  - show_arrows: {Boolean} (optional) -- whether the slideshow will render a slideshow-arrows component
  - slideshow_arrows: {HTML} (optional) -- a custom slideshow-arrows component to render instead of the default
{% endcomment %}

{% assign class = class | strip %}
{% assign style = style | strip %}

<slideshow-component
  {% if ref != blank %}
    ref="{{ ref }}"
  {% endif %}
  {% if class != blank %}
    class="{{ class }}"
  {% endif %}
  style="--slideshow-timeline: {% render 'timeline-scope', count: slide_count, prefix: 'slide' %};{{ style }}"
  {% if autoplay == true %}
    autoplay="{{ autoplay_speed }}" aria-live="polite"
  {% endif %}
  {% if initial_slide != blank %}
    initial-slide="{{ initial_slide }}"
  {% endif %}
  {% if auto_hide_controls %}
    auto-hide-controls
  {% endif %}
  {% unless infinite == false %}
    infinite
  {% endunless %}

  {{ attributes }}
>
  {{ header }}
  <slideshow-container ref="slideshowContainer">
    {% if show_arrows %}
      {% render 'slideshow-arrows', icon_style: icon_style, arrows_position: arrows_position %}
    {% endif %}
    {% if slideshow_arrows %}
      {{ slideshow_arrows }}
    {% endif %}
    <slideshow-slides
      tabindex="-1"
      ref="scroller"
      {% if slide_size %}
        size="{{ slide_size }}"
      {% endif %}
      {% if slideshow_gutters %}
        gutters="{{ slideshow_gutters }}"
      {% endif %}
    >
      {{ slides }}
    </slideshow-slides>
  </slideshow-container>
  {{ controls }}
</slideshow-component>
