{%- assign block_index = section.blocks | find_index: 'id', block.id -%}

{%- liquid
  assign preview_image = block.settings.image_1
  if block.settings.media_type_1 == 'video'
    assign preview_image = block.settings.video_1.preview_image
  endif
-%}

<div
  role="tabpanel"
  ref="panels[]"
  id="Panel-{{ block.id }}-{{ section.id }}"
  aria-labelledby="Tab-{{ block.id }}-{{ section.id }}"
  tabindex="0"
  class="layered-slideshow__panel {% if section.settings.drop_shadow %}layered-slideshow__panel--drop-shadow{% endif %}"
  style="--index: {{ block_index }}"
  {% if block_index > 0 %}
    inert
  {% endif %}
  {{ block.shopify_attributes }}
>
  <div class="layered-slideshow__panel-content">
    {%- if block.settings.toggle_overlay -%}
      {% render 'overlay', settings: block.settings %}
    {%- endif -%}
    {%- if preview_image -%}
      {%- liquid
        assign height = preview_image.width | divided_by: preview_image.aspect_ratio | round
        assign sizes = '100vw'
        assign widths = '832, 1200, 1600, 1920, 2560, 3840'
        assign loading = 'lazy'
      -%}

      {%- if block.settings.media_type_1 == 'image' -%}
        {{
          block.settings.image_1
          | image_url: width: 3840
          | image_tag: height: height, sizes: sizes, widths: widths, class: 'layered-slideshow__image', loading: loading
        }}
      {%- else -%}
        {%- if block.settings.video_1.preview_image -%}
          {{
            block.settings.video_1.preview_image
            | image_url: width: 3840
            | image_tag:
              height: height,
              sizes: sizes,
              widths: widths,
              loading: loading,
              class: 'layered-slideshow__video-poster'
          }}
        {%- endif -%}
        {{
          block.settings.video_1
          | video_tag:
            poster: null,
            autoplay: false,
            loop: true,
            controls: false,
            muted: true,
            class: 'layered-slideshow__video'
        }}
      {%- endif -%}
    {%- else -%}
      {%- liquid
        assign modulo_result = block_index | modulo: 2
        assign placeholder_variant = 2 | minus: modulo_result
        assign placeholder_name = 'hero-apparel-' | append: placeholder_variant
      -%}
      {{ placeholder_name | placeholder_svg_tag: 'layered-slideshow__image' }}
    {%- endif -%}
    <div
      class="layered-slideshow__content spacing-style{% unless block.settings.inherit_color_scheme %} color-{{ block.settings.color_scheme }}{% endunless %} background-transparent"
      style="{% render 'spacing-style', settings: block.settings %}"
    >
      <div
        class="group-block-content layout-panel-flex layout-panel-flex--{{ block.settings.content_direction }}{% if block.settings.vertical_on_mobile %} mobile-column{% endif %}"
        style="{% render 'layout-panel-style', settings: block.settings %}"
      >
        {% content_for 'blocks' %}
      </div>
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:names.slide",
  "tag": null,
  "blocks": [
    {
      "type": "_heading"
    },
    {
      "type": "button"
    },
    {
      "type": "text"
    },
    {
      "type": "group"
    },
    {
      "type": "image"
    },
    {
      "type": "video"
    },
    {
      "type": "icon"
    },
    {
      "type": "jumbo-text"
    },
    {
      "type": "@theme"
    },
    {
      "type": "@app"
    }
  ],
  "settings": [
    {
      "type": "select",
      "id": "media_type_1",
      "label": "t:settings.media_type",
      "options": [
        {
          "value": "image",
          "label": "t:options.image"
        },
        {
          "value": "video",
          "label": "t:options.video"
        }
      ],
      "default": "image"
    },
    {
      "type": "image_picker",
      "id": "image_1",
      "label": "t:settings.image",
      "visible_if": "{{ block.settings.media_type_1 == 'image' }}"
    },
    {
      "type": "video",
      "id": "video_1",
      "label": "t:settings.video",
      "visible_if": "{{ block.settings.media_type_1 == 'video' }}"
    },
    {
      "type": "header",
      "content": "t:content.content_layout"
    },
    {
      "type": "select",
      "id": "content_direction",
      "label": "t:settings.direction",
      "options": [
        {
          "value": "column",
          "label": "t:options.vertical"
        },
        {
          "value": "row",
          "label": "t:options.horizontal"
        }
      ],
      "default": "column"
    },
    {
      "type": "checkbox",
      "id": "vertical_on_mobile",
      "label": "t:settings.vertical_on_mobile",
      "default": true,
      "visible_if": "{{ block.settings.content_direction == 'row' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ block.settings.content_direction == 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        }
      ],
      "default": "center",
      "visible_if": "{{ block.settings.content_direction == 'row' }}"
    },
    {
      "type": "checkbox",
      "id": "align_baseline",
      "label": "t:settings.align_baseline",
      "default": false,
      "visible_if": "{{ block.settings.vertical_alignment == 'flex-end' }}"
    },
    {
      "type": "select",
      "id": "horizontal_alignment_flex_direction_column",
      "label": "t:settings.alignment",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.left"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.right"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ block.settings.content_direction != 'row' }}"
    },
    {
      "type": "select",
      "id": "vertical_alignment_flex_direction_column",
      "label": "t:settings.position",
      "options": [
        {
          "value": "flex-start",
          "label": "t:options.top"
        },
        {
          "value": "center",
          "label": "t:options.center"
        },
        {
          "value": "flex-end",
          "label": "t:options.bottom"
        },
        {
          "value": "space-between",
          "label": "t:options.space_between"
        }
      ],
      "default": "flex-start",
      "visible_if": "{{ block.settings.content_direction == 'column' }}"
    },
    {
      "type": "range",
      "id": "gap",
      "label": "t:settings.gap",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 12
    },
    {
      "type": "header",
      "content": "t:content.appearance"
    },
    {
      "type": "checkbox",
      "id": "inherit_color_scheme",
      "label": "t:settings.inherit_color_scheme",
      "default": true
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:settings.color_scheme",
      "default": "scheme-6",
      "visible_if": "{{ block.settings.inherit_color_scheme == false }}"
    },
    {
      "type": "checkbox",
      "id": "toggle_overlay",
      "label": "t:settings.media_overlay"
    },
    {
      "type": "color",
      "id": "overlay_color",
      "label": "t:settings.overlay_color",
      "alpha": true,
      "default": "#00000026",
      "visible_if": "{{ block.settings.toggle_overlay }}"
    },
    {
      "type": "select",
      "id": "overlay_style",
      "label": "t:settings.overlay_style",
      "options": [
        {
          "value": "solid",
          "label": "t:options.solid"
        },
        {
          "value": "gradient",
          "label": "t:options.gradient"
        }
      ],
      "default": "solid",
      "visible_if": "{{ block.settings.toggle_overlay }}"
    },
    {
      "type": "select",
      "id": "gradient_direction",
      "label": "t:settings.gradient_direction",
      "options": [
        {
          "value": "to top",
          "label": "t:options.up"
        },
        {
          "value": "to bottom",
          "label": "t:options.down"
        }
      ],
      "default": "to top",
      "visible_if": "{{ block.settings.toggle_overlay and block.settings.overlay_style == 'gradient' }}"
    },
    {
      "type": "header",
      "content": "t:content.padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "t:settings.top",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "t:settings.bottom",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding-inline-start",
      "label": "t:settings.left",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    },
    {
      "type": "range",
      "id": "padding-inline-end",
      "label": "t:settings.right",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "default": 32
    }
  ],
  "presets": [
    {
      "name": "t:names.slide",
      "category": "t:categories.layout",
      "blocks": {
        "heading": {
          "type": "text",
          "name": "t:names.heading",
          "settings": {
            "text": "t:html_defaults.new_arrivals_h2",
            "type_preset": "h2"
          }
        },
        "text": {
          "type": "text",
          "settings": {
            "text": "t:html_defaults.latest_products"
          }
        },
        "button": {
          "type": "button",
          "settings": {
            "label": "t:text_defaults.shop_now_button_label",
            "link": "shopify://collections/all"
          }
        }
      },
      "block_order": ["heading", "text", "button"]
    }
  ]
}
{% endschema %}
