{{- 'section-multitile.css' | asset_url | stylesheet_tag -}}

{%- liquid
  assign total_row_count = 0
  assign all_desktop = true
  assign all_mobile = true

  for block in section.blocks
    assign total_row_count = total_row_count | plus: block.settings.row_factor

    if block.settings.show_on != 'desktop'
      assign all_desktop = false
    endif

    if block.settings.show_on != 'mobile'
      assign all_mobile = false
    endif
  endfor
-%}

{%- style -%}
  #shopify-section-{{ section.id }}  {
    --section-gap-between-tiles: var(--grid-spacing);
    --section-block-order-mobile: {%- if section.settings.block_order_mobile == true -%}2{%- else -%}initial{%- endif -%};
    --section-total-row-count: {{ total_row_count }};
  }
  #shopify-section-{{ section.id }} > div {
    padding-block-start: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_top }});
    padding-block-end: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_bottom }});
  }
  #shopify-section-{{ section.id }} .media--with-controls iframe {
    pointer-events: auto;
  }
  {%- if section.settings.spacing_tile == 'compact' -%}
    #shopify-section-{{ section.id }} .grid {
      gap: 0;
    }
  {%- endif -%}
  {% if all_desktop %}
    @media screen and (max-width: 749px) {
      #shopify-section-{{ section.id }} > div {
        padding-block-start: 0;
        padding-block-end: 0;
      }
    }
  {% endif %}
  {% if all_mobile %}
    @media screen and (min-width: 750px) {
      #shopify-section-{{ section.id }} > div {
        padding-block-start: 0;
        padding-block-end: 0;
      }
    }
  {% endif %}
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient">
  <div class="section-multitile container {{ section.settings.section_width }} js-animation-fade-in">
    {% if section.settings.heading != blank %}
      <div class="section__head text-{{ section.settings.heading_alignment }} {{ section.settings.heading_size }}">
        {{ section.settings.heading }}
      </div>
    {% endif %}
    <div class="grid">

      {%- for block in section.blocks -%}
        {%- style -%}
          .block-{{ block.id }} {
            --gradient-background: {{ block.settings.gradient_background_color |  default: 'rgb(var(--color-background))' }};
            --block-grid-column: {{ block.settings.column_factor }};
            --block-grid-row: {{ block.settings.row_factor }};
            {%- if block.settings.tile_aspect_ratio != 'auto' -%}
              --block-height: auto;
            {%- else -%}
              --block-height: 100%;
            {%- endif -%}

            {% if block.type == 'slideshow' -%}
              display: inline;
              --block-slideshow-item-ratio: {{ block.settings.media_aspect_ratio | default: '16/9' }};
            {% endif %}
          }

        {%- endstyle -%}
        {%- liquid
          assign show_on_class = block.settings.show_on
          if show_on_class == 'mobile'
            assign show_on_class = 'large-up-hide'
          elsif show_on_class == 'desktop'
            assign show_on_class = 'small-hide medium-hide'
          else
            assign show_on_class = ''
          endif
        %}

        {% case block.type %}
          {% when 'tile' %}
            {%- liquid
              assign item_heading = ''
              assign item_text = ''

              assign item_image = ''
              assign item_video = ''
              assign item_video_external = ''

              assign item_image_mobile = ''
              assign item_video_mobile = ''
              assign item_video_external_mobile = ''

              assign item_heading = block.settings.heading
              assign item_text =  block.settings.text

              assign item_image = block.settings.image
              assign item_video = block.settings.video
              assign item_video_external = block.settings.video_external
              assign item_video_controls = block.settings.show_controls_on_video

              assign item_image_mobile = block.settings.image_mobile
              assign item_video_mobile = block.settings.video_mobile
              assign item_video_external_mobile = block.settings.video_external_mobile
              assign item_video_controls_mobile = block.settings.show_controls_on_video_mobile

              if block.settings.media_position == 'background'
                assign item_video_controls = false
                assign item_video_controls_mobile = false
              endif

              assign tile_additional_classes = ''
              assign has_media = false
              assign has_mobile_media = false

              assign media_aspect_ratio = '16/9'
              if item_image != blank or item_video != blank or item_video_external != blank
                assign has_media = true
                assign tile_additional_classes = tile_additional_classes | append: ' has-media'

                if item_video_external != blank
                  assign media_aspect_ratio = item_video_external.aspect_ratio
                elsif item_video != blank
                  assign media_aspect_ratio = item_video.aspect_ratio
                else
                  assign media_aspect_ratio = item_image.aspect_ratio
                endif
              endif

              assign media_aspect_ratio_mobile = media_aspect_ratio
              if item_image_mobile != blank or item_video_mobile != blank or item_video_external_mobile != blank
                assign has_mobile_media = true
                assign tile_additional_classes = tile_additional_classes | append: ' has-media-mobile'

                if item_video_external_mobile != blank
                  assign media_aspect_ratio_mobile = item_video_external_mobile.aspect_ratio
                elsif item_video_mobile != blank
                  assign media_aspect_ratio_mobile = item_video_mobile.aspect_ratio
                else
                  assign media_aspect_ratio_mobile = item_image_mobile.aspect_ratio
                endif
              endif

              if block.settings.tile_aspect_ratio == 'auto'
                assign block_aspect_ratio = block.settings.tile_aspect_ratio
                assign block_aspect_ratio_mobile = media_aspect_ratio_mobile | default: media_aspect_ratio
              elsif block.settings.tile_aspect_ratio == 'media'
                assign block_aspect_ratio = media_aspect_ratio
                assign block_aspect_ratio_mobile = media_aspect_ratio_mobile | default: media_aspect_ratio
              else
                assign block_aspect_ratio = block.settings.tile_aspect_ratio
                assign block_aspect_ratio_mobile = block.settings.tile_aspect_ratio
              endif
            -%}

            {% style %}
              .block-{{ block.id }} {
                --block-aspect-ratio: {{ block_aspect_ratio_mobile }};
                --block-padding-multiplier: {{ block.settings.spacing_inner }};
              }
              @media screen and (min-width: 750px) {
                .block-{{ block.id }} {
                  --block-aspect-ratio: {{ block_aspect_ratio }};
                }
              }
            {% endstyle %}

            <div class="section-multitile__block block-{{ block.id }} color-{{ block.settings.color_scheme }} gradient {{ tile_additional_classes | strip }} {{ show_on_class }} media-position--{{ block.settings.media_position }}" {{ block.shopify_attributes }}>

              {%- if has_media -%}
                <div class="section-multitile__media media{% if item_video_controls %} media--with-controls{% endif %}{% if has_mobile_media %} small-hide{% endif %}">
                  {%- if item_video_external != blank -%}
                    {%- render 'external-video', video: item_video_external, title: item_heading, controls: item_video_controls -%}
                  {%- elsif item_video != blank -%}
                    {{- item_video | video_tag: image_size: '1440x', loop: true, autoplay: true, muted: true, controls: item_video_controls -}}
                  {%- elsif item_image -%}
                    {%- render 'image', image: item_image, section_index: section.index, image_per_view: 2, alt: item_image.alt | escape -%}
                  {%- endif -%}
                </div>

                {%- if has_mobile_media -%}
                  <div class="section-multitile__media media{% if item_video_controls_mobile %} media--with-controls{% endif %} small-up-hide">
                    {%- if item_video_external_mobile != blank -%}
                      {%- render 'external-video', video: item_video_external_mobile, title: item_heading, controls: item_video_controls_mobile -%}
                    {%- elsif item_video_mobile != blank -%}
                      {{- item_video_mobile | video_tag: image_size: '720x', loop: true, autoplay: true, muted: true, controls: item_video_controls_mobile -}}
                    {%- elsif item_image_mobile -%}
                      {%- render 'image', image: item_image_mobile, section_index: section.index, image_for_mobile: true, alt: item_image_mobile.alt | escape -%}
                    {%- endif -%}
                  </div>
                {%- endif -%}
              {%- endif -%}

              <div class="section-multitile__content content {{ block.settings.content_position_vertical }} {{ block.settings.content_alignment }} {{ block.settings.content_alignment_for_mobile }}">
                <div>
                  {%- if item_heading != blank -%}
                    <h2 class="inline-richtext {{ block.settings.heading_size }}">
                      {{- item_heading -}}
                    </h2>
                  {%- endif -%}
                  {%- if item_text != blank -%}
                    <div class="section-multitile__text">
                      {{- item_text -}}
                    </div>
                  {%- endif -%}
                </div>
                {%- if block.settings.button_label != blank -%}
                  {%- render 'button', type: 'link', class: 'button section-multitile__content--button', button_style: block.settings.button_style, value: block.settings.button_label, href: block.settings.button_link -%}
                {%- endif -%}
              </div>
            </div>
          {% when 'slideshow' %}
            {%- liquid
              assign slideshow_items = ''

              if block.settings.source_of_slideshow == 'metaobject'
                if product.metafields.metaobject.multitile_slideshow.value
                  for item in product.metafields.metaobject.multitile_slideshow.value
                    assign item_heading = item.heading
                    assign item_text = item.text | metafield_tag
                    assign item_image = item.image
                    assign item_media_aspect_ratio = block.settings.media_aspect_ratio

                    capture slideshow_item
                      echo '<div class="swiper-slide section-multitile__swiper-slide">'
                        echo '<div class="section-multitile__slideshow-item">'
                          if item_image != blank
                            echo '<div class="section-multitile__slideshow-item-media media" style="aspect-ratio:' | append: item_media_aspect_ratio | append: ';">'
                              render 'image', image: item_image
                            echo '</div>'
                          endif
                          if item_heading != blank or item_text != blank
                            echo '<div class="section-multitile__slideshow-item-content' | append: ' ' | append: block.settings.content_position_vertical | append: ' ' | append: block.settings.content_alignment | append: ' ' | append: block.settings.content_alignment_for_mobile | append: '">'
                              if item_heading != blank
                                echo '<h4 class="section-multitile__slideshow-item-heading">'
                                  echo item_heading
                                echo '</h4>'
                              endif
                              if item_text != blank
                                echo '<div class="section-multitile__slideshow-item-text">'
                                  echo item_text
                                echo '</div>'
                              endif
                            echo '</div>'
                          endif
                        echo '</div>'
                      echo '</div>'
                    endcapture

                    assign slideshow_items = slideshow_items | append: slideshow_item
                  endfor
                else
                  for i in (1..5)
                    assign default_handle = 'default-' | append: i

                    assign item_heading = shop.metaobjects['multitile_media'][default_handle].heading
                    assign item_text = shop.metaobjects['multitile_media'][default_handle].text | metafield_tag
                    assign item_image = shop.metaobjects['multitile_media'][default_handle].image
                    assign item_media_aspect_ratio = block.settings.media_aspect_ratio

                    assign slideshow_media_position = 'slider_media_position_' | append: i
                    assign item_media_position = block.settings[slideshow_media_position]
                    assign media_position_class = 'media-position--' | append: item_media_position

                    if item_heading != blank or item_text != blank or item_image != blank
                      capture slideshow_item
                        echo '<div class="swiper-slide section-multitile__swiper-slide">'
                          echo '<div class="section-multitile__slideshow-item ' | append: media_position_class | append: '">'
                            if item_image != blank
                              echo '<div class="section-multitile__slideshow-item-media media" style="aspect-ratio:' | append: block.settings.media_aspect_ratio | append: ';">'
                                render 'image', image: item_image
                              echo '</div>'
                            endif
                            if item_heading != blank or item_text != blank
                              echo '<div class="section-multitile__slideshow-item-content' | append: ' ' | append: block.settings.content_position_vertical | append: ' ' | append: block.settings.content_alignment | append: ' ' | append: block.settings.content_alignment_for_mobile | append: '">'
                                if item_heading != blank
                                  echo '<h4 class="section-multitile__slideshow-item-heading">'
                                    echo item_heading
                                  echo '</h4>'
                                endif
                                if item_text != blank
                                  echo '<div class="section-multitile__slideshow-item-text">'
                                    echo item_text
                                  echo '</div>'
                                endif
                              echo '</div>'
                            endif
                          echo '</div>'
                        echo '</div>'
                      endcapture

                      assign slideshow_items = slideshow_items | append: slideshow_item
                    endif
                  endfor
                endif
              else
                for i in (1..5)
                  assign slideshow_item_heading = 'slideshow_' | append: i | append: '_heading'
                  assign slideshow_item_text = 'slideshow_' | append: i | append: '_text'
                  assign slideshow_item_image = 'slideshow_' | append: i | append: '_image'
                  assign slideshow_button_label = 'button_label_' | append: i
                  assign slideshow_button_link = 'button_link_' | append: i
                  assign slideshow_button_style = 'button_style_' | append: i
                  assign slideshow_media_position = 'slider_media_position_' | append: i

                  assign item_heading = block.settings[slideshow_item_heading]
                  assign item_text = block.settings[slideshow_item_text]
                  assign item_image = block.settings[slideshow_item_image]
                  assign item_media_aspect_ratio = block.settings.media_aspect_ratio
                  assign item_button_label = block.settings[slideshow_button_label]
                  assign item_button_link = block.settings[slideshow_button_link]
                  assign item_button_style = block.settings[slideshow_button_style]
                  assign item_media_position = block.settings[slideshow_media_position]

                  assign media_position_class = 'media-position--' | append: item_media_position

                  if item_heading != blank or item_text != blank or item_image != blank
                    capture slideshow_item
                      echo '<div class="swiper-slide section-multitile__swiper-slide">'
                        echo '<div class="section-multitile__slideshow-item ' | append: media_position_class | append: '">'
                          if item_image != blank
                            echo '<div class="section-multitile__slideshow-item-media media" style="aspect-ratio:' | append: item_media_aspect_ratio | append: ';">'
                              render 'image', image: item_image
                            echo '</div>'
                          endif
                          if item_heading != blank or item_text != blank
                            echo '<div class="section-multitile__slideshow-item-content' | append: ' ' | append: block.settings.content_position_vertical | append: ' ' | append: block.settings.content_alignment | append: ' ' | append: block.settings.content_alignment_for_mobile | append: '">'
                              if item_heading != blank
                                echo '<h4 class="section-multitile__slideshow-item-heading">'
                                  echo item_heading
                                echo '</h4>'
                              endif
                              if item_text != blank
                                echo '<div class="section-multitile__slideshow-item-text">'
                                  echo item_text
                                echo '</div>'
                              endif
                              if item_button_label != blank
                                echo '<div class="section-multitile__slideshow-item-button">'
                                  render 'button', type: item_button_style, class: 'button section-dual-tiles__content--button', button_style: item_button_style,  value:  item_button_label, href: item_button_link
                                echo '</div>'
                              endif
                            echo '</div>'
                          endif
                        echo '</div>'
                      echo '</div>'
                    endcapture

                    assign slideshow_items = slideshow_items | append: slideshow_item
                  endif

                endfor
              endif
            -%}
            {% style %}
              {% if item_heading != blank or item_text != blank %}
                --block-aspect-ratio: auto;
              {% else %}
                --block-aspect-ratio: {{ block.settings.media_aspect_ratio | default: 'auto' }};
              {% endif %}
              .block-{{ block.id }} {
                --block-aspect-ratio: {{ block.settings.media_aspect_ratio | default: 'auto' }};
              }
              .block-{{ block.id }} .section-multitile__slideshow-item-content {
                --block-padding-multiplier: {{ block.settings.spacing_inner }};
                padding: calc(var(--section-spacing-unit-size) * var(--block-padding-multiplier, 0));
              }
            {% endstyle %}

            <div class="section-multitile__block block-{{ block.id }} color-{{ block.settings.color_scheme }} gradient {{ show_on_class }}" {{ block.shopify_attributes }}>
              {%- capture data_swiper_options -%}
                {
                  "swiperName": "multitile",
                  "swiperId": "{{ block.id }}",
                  "rewind": true,
                  "slideCount": 5,
                  "spaceBetweenDesktop": 0,
                  "spaceBetweenMobile": 0,
                  "slidesPerViewDesktop": 1
                  {%- if block.settings.show_slideshow_bullets -%},
                    "pagination": "custom_bullet",
                    "paginationElement": ".swiper-pagination--{{ block.id }}"
                  {%- endif -%}
                  {%- if block.settings.show_slideshow_arrows -%},
                    "navigation": {
                      "prevEl": ".swiper-button--prev-{{ block.id }}",
                      "nextEl": ".swiper-button--next-{{ block.id }}"
                    }
                  {%- endif -%}
                  {%- if block.settings.slideshow_autoplay > 0 -%},
                    {%- if block.settings.show_slideshow_progress -%}
                    "autoplayProgress": true,
                    {%- endif -%}
                    "autoplay": {
                      "delay": {{ block.settings.slideshow_autoplay | times: 1000 }},
                      "disableOnInteraction": false
                    }
                  {%- endif -%}
                }
              {%- endcapture -%}
              <swiper-component class="swiper"
                data-swiper-id="{{ block.id }}"
                data-swiper-options='{{ data_swiper_options | strip_newlines | replace: " ", "" }}'
              >
                <div class="swiper-wrapper section-multitile__swiper-wrapper">
                  {{ slideshow_items }}
                </div>
                <div class="swiper-actions-container swiper-actions-container--{{ block.settings.slideshow_actions_alignment }}">
                  <div class="swiper-actions">
                    {%- if block.settings.slideshow_autoplay > 0 and block.settings.show_slideshow_progress -%}
                      <div class="autoplay-progress autoplay-progress--{{ block.id }}">
                        <svg viewBox="0 0 48 48"><circle cx="24" cy="24" r="20"></circle></svg>
                        <span></span>
                      </div>
                    {%- endif -%}
                    {% if block.settings.show_slideshow_arrows %}
                    <button class="swiper-button text-current swiper-button--prev-{{ block.id }}" aria-label="{{- 'theme.actions.previous' | t -}}">
                      {%- render 'icon', icon_name: 'theme-chevron' -%}
                    </button>
                    {%- endif -%}
                    {% if block.settings.show_slideshow_bullets %}
                      <div class="swiper-pagination swiper-pagination--{{ block.id }} swiper-pagination--dots"></div>
                    {% endif %}
                    {% if block.settings.show_slideshow_arrows %}
                    <button class="swiper-button text-current swiper-button--next-{{ block.id }}" aria-label="{{- 'theme.actions.next' | t -}}">
                      {%- render 'icon', icon_name: 'theme-chevron' -%}
                    </button>
                    {% endif %}
                  </div>
                </div>
              </swiper-component>
            </div>
        {% endcase %}
      {%- endfor -%}
    </div>
  </div>
</div>

{% schema %}
{
  "name": "t:sections.multitile.name",
  "tag": "section",
  "settings": [
    {
      "type": "checkbox",
      "id": "block_order_mobile",
      "label": "t:sections.dual-tiles.settings.block_order_mobile.label"
    },
    {
      "type": "inline_richtext",
      "id": "heading",
      "label": "t:sections.global.element.heading.label"
    },
    {
      "type": "select",
      "id": "heading_size",
      "label": "t:sections.global.element.heading_size.label",
      "options": [
        {
          "value": "h6",
          "label": "XS"
        },
        {
          "value": "h5",
          "label": "S"
        },
        {
          "value": "h4",
          "label": "M"
        },
        {
          "value": "h3",
          "label": "L"
        },
        {
          "value": "h2",
          "label": "XL"
        }
      ],
      "default": "h3"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "t:sections.global.alignment.for__heading.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.global.alignment.options.start.label"
        },
        {
          "value": "center",
          "label": "t:sections.global.alignment.options.center.label"
        },
        {
          "value": "end",
          "label": "t:sections.global.alignment.options.end.label"
        }
      ],
      "default": "start"
    },
    {
      "type": "select",
      "id": "spacing_tile",
      "label": "t:sections.global.spacing.tile.label",
      "options": [
        {
          "value": "default",
          "label": "t:sections.global.spacing.options.default.label"
        },
        {
          "value": "compact",
          "label": "t:sections.global.spacing.options.compact.label"
        }
      ],
      "default": "default"
    },
    {
      "type": "header",
      "content": "t:sections.global.header.settings.content",
      "info": "t:sections.global.header.settings.info"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "default": "scheme-1",
      "label": "t:sections.global.color_scheme.label"
    },
    {
      "type": "select",
      "id": "section_width",
      "label": "t:sections.global.settings.section_width.label",
      "options": [
        {
          "value": "max-w-page",
          "label": "t:sections.global.section_width.options.page.label"
        },
        {
          "value": "max-w-narrower",
          "label": "t:sections.global.section_width.options.narrower.label"
        },
        {
          "value": "max-w-fluid",
          "label": "t:sections.global.section_width.options.fluid.label"
        },
        {
          "value": "max-w-full",
          "label": "t:sections.global.section_width.options.full.label"
        }
      ],
      "default": "max-w-page"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.settings.spacing.settings.spacing_top.label",
      "options": [
        {
          "value": "0",
          "label": "No"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_bottom",
      "label": "t:sections.global.settings.spacing.settings.spacing_bottom.label",
      "options": [
        {
          "value": "0",
          "label": "No"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    }
  ],
  "blocks": [
    {
      "type": "tile",
      "name": "t:sections.multitile.blocks.tile.name",
      "settings": [
        {
          "type": "select",
          "id": "show_on",
          "label": "t:sections.global.settings.show_on.label",
          "options": [
            {
              "value": "desktop",
              "label": "t:sections.global.settings.show_on.options.desktop.label"
            },
            {
              "value": "mobile",
              "label": "t:sections.global.settings.show_on.options.mobile.label"
            },
            {
              "value": "both",
              "label": "t:sections.global.settings.show_on.options.both.label"
            }
          ],
          "default": "both"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.grid_layout.content",
          "info": "t:sections.global.header.grid_layout.info"
        },
        {
          "type": "range",
          "id": "column_factor",
          "label": "t:sections.global.settings.grid.blocks.settings.column_factor.label",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 1
        },
        {
          "type": "range",
          "id": "row_factor",
          "label": "t:sections.global.settings.grid.blocks.settings.row_factor.label",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 1
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.global.color_scheme.label",
          "default": "scheme-5"
        },
        {
          "type": "color_background",
          "id": "gradient_background_color",
          "label": "t:sections.global.color_scheme.custom_background_color.label"
        },
        {
          "type": "select",
          "id": "tile_aspect_ratio",
          "label": "t:sections.multitile.blocks.tile.settings.tile_aspect_ratio.label",
          "info": "t:sections.multitile.blocks.tile.settings.tile_aspect_ratio.info",
          "options": [
            {
              "value": "auto",
              "label": "t:sections.global.aspect_ratio.options.auto.label",
              "group": "t:sections.global.settings.aspect_ratio.group__auto.label"
            },
            {
              "value": "media",
              "label": "t:sections.global.aspect_ratio.options.media.label",
              "group": "t:sections.global.settings.aspect_ratio.group__auto.label"
            },
            {
              "value": "1/1",
              "label": "1:1",
              "group": "t:sections.global.settings.aspect_ratio.group__square.label"
            },
            {
              "value": "4/3",
              "label": "4:3",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "3/4",
              "label": "3:4",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "3/2",
              "label": "3:2",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "2/3",
              "label": "2:3",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "5/4",
              "label": "5:4",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "4/5",
              "label": "4:5",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "16/9",
              "label": "16:9",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "9/16",
              "label": "9:16",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "2/1",
              "label": "2:1",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "4/1",
              "label": "4:1",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "8/1",
              "label": "8:1",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "1/2",
              "label": "1:2",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            }
          ],
          "default": "auto"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.text.content"
        },
        {
          "type": "select",
          "id": "content_position_vertical",
          "label": "t:sections.global.content.position.label",
          "options": [
            {
              "value": "justify-start",
              "label": "t:sections.global.content.position.options.start.label"
            },
            {
              "value": "justify-center",
              "label": "t:sections.global.content.position.options.center.label"
            },
            {
              "value": "justify-end",
              "label": "t:sections.global.content.position.options.end.label"
            }
          ],
          "default": "justify-center"
        },
        {
          "type": "select",
          "id": "content_alignment",
          "label": "t:sections.global.content.alignment.label",
          "options": [
            {
              "value": "align-start text-start",
              "label": "t:sections.global.content.alignment.options.start.label"
            },
            {
              "value": "align-center text-center",
              "label": "t:sections.global.content.alignment.options.center.label"
            },
            {
              "value": "align-end text-end",
              "label": "t:sections.global.content.alignment.options.end.label"
            }
          ],
          "default": "align-center text-center"
        },
        {
          "type": "select",
          "id": "content_alignment_for_mobile",
          "label": "t:sections.global.content.alignment.for__mobile.label",
          "options": [
            {
              "value": "align-start--mobile text-start--mobile",
              "label": "t:sections.global.content.alignment.options.start.label"
            },
            {
              "value": "align-center--mobile text-center--mobile",
              "label": "t:sections.global.content.alignment.options.center.label"
            },
            {
              "value": "align-end--mobile text-end--mobile",
              "label": "t:sections.global.content.alignment.options.end.label"
            }
          ],
          "default": "align-start--mobile text-start--mobile"
        },
        {
          "type": "select",
          "id": "media_position",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "background"
        },
        {
          "type": "inline_richtext",
          "id": "heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Heading for Multi Content Tiles"
        },
        {
          "type": "select",
          "id": "heading_size",
          "label": "t:sections.global.element.heading_size.label",
          "options": [
            {
              "value": "h6",
              "label": "XS"
            },
            {
              "value": "h5",
              "label": "S"
            },
            {
              "value": "h4",
              "label": "M"
            },
            {
              "value": "h3",
              "label": "L"
            },
            {
              "value": "h2",
              "label": "XL"
            }
          ],
          "default": "h3"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.media.content"
        },
        {
          "type": "image_picker",
          "id": "image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "video",
          "id": "video",
          "label": "t:sections.global.element.video.label",
          "info": "t:sections.global.element.video.info"
        },
        {
          "type": "video_url",
          "id": "video_external",
          "accept": [
            "youtube",
            "vimeo"
          ],
          "label": "t:sections.global.element.video_external.label",
          "info": "t:sections.global.element.video_external.info"
        },
        {
          "type": "checkbox",
          "id": "show_controls_on_video",
          "label": "t:sections.global.element.video.show_controls.label",
          "default": false
        },
        {
          "type": "header",
          "content": "t:sections.global.header.media_mobile.content",
          "info": "t:sections.global.header.media_mobile.info"
        },
        {
          "type": "image_picker",
          "id": "image_mobile",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "video",
          "id": "video_mobile",
          "label": "t:sections.global.element.video.label",
          "info": "t:sections.global.element.video.info"
        },
        {
          "type": "video_url",
          "id": "video_external_mobile",
          "accept": [
            "youtube",
            "vimeo"
          ],
          "label": "t:sections.global.element.video_external.label",
          "info": "t:sections.global.element.video_external.info"
        },
        {
          "type": "checkbox",
          "id": "show_controls_on_video_mobile",
          "label": "t:sections.global.element.video.for__mobile.show_controls.label",
          "default": false
        },
        {
          "type": "select",
          "id": "spacing_inner",
          "label": "t:sections.multitile.blocks.tile.settings.spacing_inner.label",
          "options": [
            {
              "value": "0",
              "label": "No"
            },
            {
              "value": "1",
              "label": "S"
            },
            {
              "value": "2",
              "label": "M"
            },
            {
              "value": "4",
              "label": "L"
            },
            {
              "value": "6",
              "label": "XL"
            }
          ],
          "default": "2"
        }
      ]
    },
    {
      "type": "slideshow",
      "name": "t:sections.multitile.blocks.slideshow.name",
      "settings": [
        {
          "type": "select",
          "id": "show_on",
          "label": "t:sections.global.settings.show_on.label",
          "options": [
            {
              "value": "desktop",
              "label": "t:sections.global.settings.show_on.options.desktop.label"
            },
            {
              "value": "mobile",
              "label": "t:sections.global.settings.show_on.options.mobile.label"
            },
            {
              "value": "both",
              "label": "t:sections.global.settings.show_on.options.both.label"
            }
          ],
          "default": "both"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.grid_layout.content",
          "info": "t:sections.global.header.grid_layout.info"
        },
        {
          "type": "range",
          "id": "column_factor",
          "label": "t:sections.global.settings.grid.blocks.settings.column_factor.label",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 6
        },
        {
          "type": "range",
          "id": "row_factor",
          "label": "t:sections.global.settings.grid.blocks.settings.row_factor.label",
          "min": 1,
          "max": 6,
          "step": 1,
          "default": 1
        },
        {
          "type": "select",
          "id": "media_aspect_ratio",
          "label": "t:sections.multitile.blocks.slideshow.settings.media_aspect_ratio.label",
          "info": "t:sections.multitile.blocks.slideshow.settings.media_aspect_ratio.info",
          "options": [
            {
              "value": "1/1",
              "label": "1:1",
              "group": "t:sections.global.settings.aspect_ratio.group__square.label"
            },
            {
              "value": "4/3",
              "label": "4:3",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "3/4",
              "label": "3:4",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "3/2",
              "label": "3:2",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "2/3",
              "label": "2:3",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "5/4",
              "label": "5:4",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "4/5",
              "label": "4:5",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "16/9",
              "label": "16:9",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "9/16",
              "label": "9:16",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            },
            {
              "value": "2/1",
              "label": "2:1",
              "group": "t:sections.global.settings.aspect_ratio.group__landscape.label"
            },
            {
              "value": "1/2",
              "label": "1:2",
              "group": "t:sections.global.settings.aspect_ratio.group__portrait.label"
            }
          ],
          "default": "2/1"
        },
        {
          "type": "color_scheme",
          "id": "color_scheme",
          "label": "t:sections.global.color_scheme.label",
          "default": "scheme-5"
        },
        {
          "type": "color_background",
          "id": "gradient_background_color",
          "label": "t:sections.global.color_scheme.custom_background_color.label"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.text.content"
        },
        {
          "type": "select",
          "id": "content_position_vertical",
          "label": "t:sections.global.content.position.label",
          "options": [
            {
              "value": "justify-start",
              "label": "t:sections.global.content.position.options.start.label"
            },
            {
              "value": "justify-center",
              "label": "t:sections.global.content.position.options.center.label"
            },
            {
              "value": "justify-end",
              "label": "t:sections.global.content.position.options.end.label"
            }
          ],
          "default": "justify-center"
        },
        {
          "type": "select",
          "id": "content_alignment",
          "label": "t:sections.global.content.alignment.label",
          "options": [
            {
              "value": "align-start text-start",
              "label": "t:sections.global.content.alignment.options.start.label"
            },
            {
              "value": "align-center text-center",
              "label": "t:sections.global.content.alignment.options.center.label"
            },
            {
              "value": "align-end text-end",
              "label": "t:sections.global.content.alignment.options.end.label"
            }
          ],
          "default": "align-center text-center"
        },
        {
          "type": "select",
          "id": "content_alignment_for_mobile",
          "label": "t:sections.global.content.alignment.for__mobile.label",
          "options": [
            {
              "value": "align-start--mobile text-start--mobile",
              "label": "t:sections.global.content.alignment.options.start.label"
            },
            {
              "value": "align-center--mobile text-center--mobile",
              "label": "t:sections.global.content.alignment.options.center.label"
            },
            {
              "value": "align-end--mobile text-end--mobile",
              "label": "t:sections.global.content.alignment.options.end.label"
            }
          ],
          "default": "align-start--mobile text-start--mobile"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow_settings.content"
        },
        {
          "type": "range",
          "id": "slideshow_autoplay",
          "label": "t:sections.global.slideshow.autoplay.label",
          "info": "t:sections.global.slideshow.autoplay.info",
          "min": 0,
          "max": 10,
          "step": 1,
          "unit": "sec",
          "default": 0
        },
        {
          "type": "select",
          "id": "slideshow_actions_alignment",
          "label": "t:sections.global.slideshow.actions_alignment.label",
          "options": [
            {
              "value": "start",
              "label": "t:sections.global.slideshow.actions_alignment.options.start.label"
            },
            {
              "value": "center",
              "label": "t:sections.global.slideshow.actions_alignment.options.center.label"
            },
            {
              "value": "end",
              "label": "t:sections.global.slideshow.actions_alignment.options.end.label"
            }
          ],
          "default": "start"
        },
        {
          "type": "checkbox",
          "id": "show_slideshow_arrows",
          "label": "t:sections.global.slideshow.show_arrows.label",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_slideshow_bullets",
          "label": "t:sections.global.slideshow.show_bullets.label",
          "default": true
        },
        {
          "type": "checkbox",
          "id": "show_slideshow_progress",
          "label": "t:sections.global.slideshow.show_progress.label",
          "default": true
        },
        {
          "type": "select",
          "id": "source_of_slideshow",
          "label": "t:sections.multitile.blocks.slideshow.settings.source_of_slideshow.label",
          "info": "t:sections.multitile.blocks.slideshow.settings.source_of_slideshow.info",
          "options": [
            {
              "value": "manual",
              "label": "t:sections.multitile.blocks.slideshow.settings.source_of_slideshow.options.manual.label"
            },
            {
              "value": "metaobject",
              "label": "t:sections.multitile.blocks.slideshow.settings.source_of_slideshow.options.metaobject.label"
            }
          ],
          "default": "manual"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow.for__item_1.content"
        },
        {
          "type": "inline_richtext",
          "id": "slideshow_1_heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Slideshow 1"
        },
        {
          "type": "richtext",
          "id": "slideshow_1_text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label_1",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style_1",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "image_picker",
          "id": "slideshow_1_image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "select",
          "id": "slider_media_position_1",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "top"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow.for__item_2.content"
        },
        {
          "type": "inline_richtext",
          "id": "slideshow_2_heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Slideshow 2"
        },
        {
          "type": "richtext",
          "id": "slideshow_2_text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style_2",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "image_picker",
          "id": "slideshow_2_image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "select",
          "id": "slider_media_position_2",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "top"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow.for__item_3.content"
        },
        {
          "type": "inline_richtext",
          "id": "slideshow_3_heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Slideshow 3"
        },
        {
          "type": "richtext",
          "id": "slideshow_3_text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label_3",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link_3",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style_3",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "image_picker",
          "id": "slideshow_3_image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "select",
          "id": "slider_media_position_3",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "top"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow.for__item_4.content"
        },
        {
          "type": "inline_richtext",
          "id": "slideshow_4_heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Slideshow 4"
        },
        {
          "type": "richtext",
          "id": "slideshow_4_text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label_4",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link_4",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style_4",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "image_picker",
          "id": "slideshow_4_image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "select",
          "id": "slider_media_position_4",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "top"
        },
        {
          "type": "header",
          "content": "t:sections.global.header.slideshow.for__item_5.content"
        },
        {
          "type": "inline_richtext",
          "id": "slideshow_5_heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Slideshow 5"
        },
        {
          "type": "richtext",
          "id": "slideshow_5_text",
          "label": "t:sections.global.element.text.label"
        },
        {
          "type": "text",
          "id": "button_label_5",
          "label": "t:sections.global.element.button_label.label",
          "info": "t:sections.global.element.button_label.info"
        },
        {
          "type": "url",
          "id": "button_link_5",
          "label": "t:sections.global.element.button.link.label"
        },
        {
          "type": "select",
          "id": "button_style_5",
          "label": "t:sections.global.element.button.style.label",
          "options": [
            {
              "value": "button--filled",
              "label": "t:sections.global.element.button.style.options.filled.label"
            },
            {
              "value": "button--outlined",
              "label": "t:sections.global.element.button.style.options.outlined.label"
            },
            {
              "value": "button--text",
              "label": "t:sections.global.element.button.style.options.text.label"
            }
          ],
          "default": "button--filled"
        },
        {
          "type": "image_picker",
          "id": "slideshow_5_image",
          "label": "t:sections.global.element.image.label"
        },
        {
          "type": "select",
          "id": "slider_media_position_5",
          "label": "t:sections.global.element.media.position.label",
          "options": [
            {
              "value": "top",
              "label": "t:sections.global.element.media.position.options.top.label"
            },
            {
              "value": "bottom",
              "label": "t:sections.global.element.media.position.options.bottom.label"
            },
            {
              "value": "background",
              "label": "t:sections.global.element.media.position.options.background.label"
            }
          ],
          "default": "top"
        },
        {
          "type": "select",
          "id": "spacing_inner",
          "label": "t:sections.multitile.blocks.tile.settings.spacing_inner.label",
          "options": [
            {
              "value": "0",
              "label": "No"
            },
            {
              "value": "1",
              "label": "S"
            },
            {
              "value": "2",
              "label": "M"
            },
            {
              "value": "4",
              "label": "L"
            },
            {
              "value": "6",
              "label": "XL"
            }
          ],
          "default": "2"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.multitile.name",
      "blocks": [
        {
          "type": "tile",
          "settings": {
            "column_factor": 3,
            "row_factor": 2
          }
        },
        {
          "type": "tile",
          "settings": {
            "column_factor": 3,
            "row_factor": 1
          }
        },
        {
          "type": "tile",
          "settings": {
            "column_factor": 3,
            "row_factor": 1
          }
        }
      ]
    }
  ]
}
{% endschema %}