<div id="block_id-{{ block.id }}" class="hdt-slider__slide hdt-slideshow_item slide-item_base hdt-oh" color-scheme="{{ block.settings.color_scheme }}" {{ block.shopify_attributes }}>
  {%- if section.settings.image_height == 'adapt_image_first' or section.settings.image_height_mb == 'adapt_image_first' -%}
    <style>
      #Slider-{{ section.id }} {
        {%- if section.settings.image_height_mb == 'adapt_image_first' %}--slide-{{ block.id }}-ratio: {{ block.settings.image_mb.aspect_ratio | default: block.settings.image.aspect_ratio | default: 3.0 }};{%- endif -%}
        {%- if section.settings.image_height == 'adapt_image_first' %}--slide-{{ block.id }}-ratio-md: {{ block.settings.image.aspect_ratio | default: 2.0 }};{%- endif -%}
      }
    </style>
  {%- endif -%}
  <style>
    #block_id-{{ block.id }} {
      --content-pd-tb-dk: {{ block.settings.padding_vertical }}px;
      --content-pd-lr-dk: {{ block.settings.padding_horizontal }}px;
      --content-min-width: {{ block.settings.min_width_content }}px;
    }
  </style>
  {% assign image_mb = block.settings.image_mb | default: block.settings.image %}
  <div class="hdt-slide_inner hdt-relative hdt-media-overlap-content" style="{% if section.settings.image_height_mb == 'adapt_image' %}--aspect-ratioapt: {{ image_mb.aspect_ratio | default: 2.0 }};{% endif %}{% if section.settings.image_height == 'adapt_image' %}--aspect-ratioapt-md: {{ block.settings.image.aspect_ratio | default: 2.0 }};{% endif %}{% if image_mb.presentation.focal_point != blank %}--object-pos-mb: {{ image_mb.presentation.focal_point }}{% endif %}">
    {%- liquid
      if section.settings.full_width 
        assign sizes = '100vw'
      else
        assign sizes = '(min-width: 1150px) ' | append: settings.page_width | append: 'px,(min-width: 768px) calc( 100vw - 60px), calc(100vw - 30px)'
      endif
      if block.settings.image != blank
        assign img_class = 'hdt-object-pos-mb'
        echo '<picture class="hdt-media-wrapper">'
        if block.settings.image_mb != blank and block.settings.image_mb != block.settings.image
          assign srcset = block.settings.image_mb | image_url: width: block.settings.image_mb.width | image_tag: widths: '200,400,600,800,1000', alt: null | split: 'srcset="' | last
          unless srcset contains 'src='
            echo '<source media="(max-width: 767px)" srcset="' | append: srcset | replace_first: 'style=', 'data-none='
          endunless
        endif
        echo block.settings.image | image_url: width: block.settings.image.width | image_tag: loading: 'eager', class: img_class, sizes: sizes, widths: '400,600,800,1000,1200,1400,1600,1800,2000,2200,2400,2600,2800,3000,3200,3400,3600'
        echo '</picture>'
      else
        capture current
          cycle 1, 2 , 3
        endcapture
        echo '<div class="hdt-media-wrapper">'
        echo 'hero-apparel-' | append: current | placeholder_svg_tag: 'placeholder-svg hdt-placeholder'
        echo '</div>'
      endif
    -%}
    <a {% if block.settings.url == blank %}
      role="link" disabled="true"
      {% else %}
        href="{{ block.settings.url }}" 
      {% endif %} target="{% if block.settings.banner_target %}_blank{% else %}_self{% endif %}" class="hdt-full-width-link" ></a>
      <div class="hdt-grid hdt-h-full{% unless request.design_mode %} hdt-pe-none{% endunless %}">
        <div class="hdt-content hdt-rounded hdt-place-self-{{ block.settings.content_position_mb }} md:hdt-place-self-{{ block.settings.content_position }} {% if block.settings.background_content %} hdt-background-content{% endif %}{% if block.settings.use_border_content %} hdt-content-use-border{% endif %}{% if block.settings.box_square %} hdt-content-boxsquare{% endif %}{% if block.settings.content_rounded %} hdt-rounded-full{% endif %}"{% if block.settings.background_content %} style="--content-bg-opacity: {{ block.settings.bg_opacity | divided_by: 100.00 }};--content-border-opacity: {{ block.settings.border_opacity | divided_by: 100.00 }};--content-border-style: {{ block.settings.border_style }};--border-pd-dk: {{ block.settings.border_pd_dk }}px;--border-pd-mb: {{ block.settings.border_pd }}px;" reval{% endif %}>
          <div class="hdt-content-inner hdt-text-{{ block.settings.alignment_mb }} md:hdt-text-{{ block.settings.alignment }}">
            {% content_for 'blocks' %}
          </div>
        </div>
      </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.slideshow.blocks.slide.name",
  "tag": null,
  "blocks": [
    { 
      "type": "text" 
    },
    { 
      "type": "paragraph" 
    },
    { 
      "type": "button"
    },
    { 
      "type": "heading"
    },
    { 
      "type": "spacer"
    },
    {
      "type": "_slide_product-title"
    }
  ],
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "t:sections.slideshow.blocks.slide.settings.image.label"
    },
    {
      "type": "image_picker",
      "id": "image_mb",
      "label": "t:sections.slideshow.blocks.slide.settings.image_mb.label",
      "info": "t:sections.slideshow.blocks.slide.settings.image_mb.info"
    },
    {
      "type": "url",
      "id": "url",
      "label": "t:sections.slideshow.blocks.slide.settings.url.label",
      "info": "t:sections.slideshow.blocks.slide.settings.url.info"
    },
    {
      "type": "checkbox",
      "id": "banner_target",
      "label": "t:blocks.banner_item.settings.banner_target",
      "default": false
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.colors.label"
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.blocks.slide.settings.desktop.label"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "t:sections.all.content_position.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.all.content_position.options.start"
        },
        {
          "value": "start-center",
          "label": "t:sections.all.content_position.options.start_center"
        },
        {
          "value": "start-end",
          "label": "t:sections.all.content_position.options.start_end"
        },
        {
          "value": "center",
          "label": "t:sections.all.content_position.options.center"
        },
        {
          "value": "center-start",
          "label": "t:sections.all.content_position.options.center_start"
        },
        {
          "value": "center-end",
          "label": "t:sections.all.content_position.options.center_end"
        },
        {
          "value": "end",
          "label": "t:sections.all.content_position.options.end"
        },
        {
          "value": "end-start",
          "label": "t:sections.all.content_position.options.end_start"
        },
        {
          "value": "end-center",
          "label": "t:sections.all.content_position.options.end_center"
        }
      ],
      "default": "center"
    },
    {
      "type": "text_alignment",
      "id": "alignment",
      "label": "Text alignment"
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.blocks.slide.settings.mobile.label"
    },
    {
      "type": "select",
      "id": "content_position_mb",
      "label": "t:sections.all.content_position.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.all.content_position.options.start"
        },
        {
          "value": "start-center",
          "label": "t:sections.all.content_position.options.start_center"
        },
        {
          "value": "start-end",
          "label": "t:sections.all.content_position.options.start_end"
        },
        {
          "value": "center",
          "label": "t:sections.all.content_position.options.center"
        },
        {
          "value": "center-start",
          "label": "t:sections.all.content_position.options.center_start"
        },
        {
          "value": "center-end",
          "label": "t:sections.all.content_position.options.center_end"
        },
        {
          "value": "end",
          "label": "t:sections.all.content_position.options.end"
        },
        {
          "value": "end-start",
          "label": "t:sections.all.content_position.options.end_start"
        },
        {
          "value": "end-center",
          "label": "t:sections.all.content_position.options.end_center"
        }
      ],
      "default": "center"
    },
    {
      "type": "text_alignment",
      "id": "alignment_mb",
      "label": "Text alignment"
    },
    {
      "type": "header",
      "content": "t:blocks.slide_item.settings.content_background.label"
    },
    {
      "type": "checkbox",
      "id": "background_content",
      "label": "t:blocks.slide_item.settings.background_content",
      "default": false
    }, 
    {
      "type": "range",
      "id": "bg_opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:blocks.slide_item.settings.bg_opacity.label",
      "default": 0
    },
    {
      "type": "checkbox",
      "id": "box_square",
      "label": "t:blocks.slide_item.settings.box_square.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "content_rounded",
      "label": "t:blocks.slide_item.settings.content_rounded.label",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "use_border_content",
      "label": "t:blocks.slide_item.settings.use_border_content.label",
      "default": false
    },
    {
      "type": "range",
      "id": "border_opacity",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "%",
      "label": "t:blocks.slide_item.settings.border_opacity.label",
      "default": 0
    },
    {
      "type": "select",
      "id": "border_style",
      "label": "t:blocks.slide_item.settings.border_style.label",
      "options": [
        {
          "value": "none",
          "label": "t:blocks.slide_item.settings.border_style.options.none"
        },
        {
          "value": "solid",
          "label": "t:blocks.slide_item.settings.border_style.options.solid"
        },
        {
          "value": "dashed",
          "label": "t:blocks.slide_item.settings.border_style.options.dashed"
        },
        {
          "value": "Double",
          "label": "t:blocks.slide_item.settings.border_style.options.double"
        }
      ],
      "default": "none"
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.blocks.slide.settings.desktop.label"
    },
    {
      "type": "range",
      "id": "border_pd_dk",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "t:blocks.slide_item.settings.border_pd.label",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_vertical",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding vertical",
      "default": 30
    },
    {
      "type": "range",
      "id": "padding_horizontal",
      "min": 0,
      "max": 100,
      "step": 1,
      "unit": "px",
      "label": "Padding horizontal",
      "default": 30
    },
    {
      "type": "range",
      "id": "min_width_content",
      "min": 100,
      "max": 1000,
      "step": 10,
      "unit": "px",
      "label": "Content min width",
      "default": 350
    },
    {
      "type": "header",
      "content": "t:sections.slideshow.blocks.slide.settings.mobile.label"
    },
    {
      "type": "range",
      "id": "border_pd",
      "min": 0,
      "max": 20,
      "step": 1,
      "unit": "px",
      "label": "t:blocks.slide_item.settings.border_pd.label",
      "default": 0
    },
    
  ],
  "presets": [
    {
      "name": "t:sections.slideshow.blocks.slide.name",
      "blocks": [
        {
          "type": "heading",
          "settings": {
            "heading": "<h2>Glamorous <br>Glam<\/h2>",
            "heading_size": "h2"
          }
        },
        {
          "type": "spacer",
          "settings": {
            "space_lg": 20,
            "space_md": 16,
            "space": 10
          }
        },
        {
          "type": "text",
          "settings": {
            "text": "<p>From casual to formal, we've got you covered<\/p>",
            "text_size": "2xl"
          }
        },
        {
          "type": "spacer",
          "settings": {
            "space_lg": 50,
            "space_md": 30,
            "space": 20
          }
        },
        {
          "type": "button",
          "settings": {
            "label": "Shop collection",
            "link": "shopify:\/\/collections",
            "open_in_new_tab": false,
            "full_width": false,
            "style_class": "hdt-btn-solid",
            "icon": "none",
            "icon_position": "after",
            "icon_height": 16,
            "icon_spacing": 5
          }
        }
      ]
    }
  ]
}
{% endschema %}