{%- render 'css', css: 'section-full-width-banner.css' -%}
<script src="{{- 'intersection-observer.js' | asset_url -}}" defer="defer"></script>
{% liquid
  # set heading tag based on section index
  if section.index == 1
    assign heading_tag = 'h1'
  else
    assign heading_tag = 'h2'
  endif

  assign section_image = section.settings.image
  assign section_video = section.settings.video
  assign section_video_external = section.settings.video_external
  assign section_video_controls = section.settings.show_controls_on_video

  assign section_image_mobile = section.settings.image_mobile
  assign section_video_mobile = section.settings.video_mobile
  assign section_video_external_mobile = section.settings.video_external_mobile
  assign section_video_controls_mobile = section.settings.show_controls_on_video_mobile

  if section.settings.media_position == 'background'
    assign section_video_controls = false
    assign section_video_controls_mobile = false
  endif

  assign has_media = false
  assign has_media_mobile = false

  assign section_media_classes = ''
  if section_image != blank or section_video != blank or section_video_external != blank
    assign has_media = true
    if section_video_external != blank
      assign aspect_ratio = section_video_external.aspect_ratio
      assign section_media_classes = section_media_classes | append: ' has-video'
    elsif section_video != blank
      assign aspect_ratio = section_video.aspect_ratio
      assign section_media_classes = section_media_classes | append: ' has-video'
    elsif section_image != blank
      assign aspect_ratio = section_image.aspect_ratio
    endif
  endif

  if section_image_mobile != blank or section_video_mobile != blank or section_video_external_mobile != blank
    assign has_media_mobile = true
    if section_video_external_mobile != blank
      assign aspect_ratio_mobile = section_video_external_mobile.aspect_ratio
      assign section_media_classes = section_media_classes | append: ' has-video--mobile'
    elsif section_video_mobile != blank
      assign aspect_ratio_mobile = section_video_mobile.aspect_ratio
      assign section_media_classes = section_media_classes | append: ' has-video--mobile'
    elsif section_image_mobile != blank
      assign aspect_ratio_mobile = section_image_mobile.aspect_ratio
    endif
  endif

  assign section_media_classes = ''
  if section_video != blank or section_video_external != blank
    assign section_media_classes = section_media_classes | append: ' has-video'
  endif
  if section_video_mobile != blank or section_video_external_mobile != blank
    assign section_media_classes = section_media_classes | append: ' has-video--mobile'
  endif

  # this is very important check to keep the transparent header on the first section
  if has_media and section.settings.media_position == 'background'
    assign enable_transparent_header = section.settings.enable_transparent_header
  else
    assign enable_transparent_header = false
  endif
%}

{%- style -%}
  #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 }});
    --content-padding: calc(var(--section-spacing-unit-size) * {{ section.settings.spacing_inner }});
    --media-aspect-ratio: {{ section.settings.aspect_ratio_mobile }};
  }
  @media screen and (max-width: 749px) {
    #shopify-section-{{ section.id }} > div .section-full-width-banner:has(.media > *) .section-full-width-banner__content {
      background-color: transparent;
    }
    #shopify-section-{{ section.id }} .section-height-auto--mobile .media {
      aspect-ratio: {{ aspect_ratio_mobile | default: section.settings.aspect_ratio_mobile }};
    }
  }
  @media screen and (min-width: 750px) {
    #shopify-section-{{ section.id }} > div {
      --media-aspect-ratio: {{ section.settings.aspect_ratio }};
    }
    {% if has_media %}
      #shopify-section-{{ section.id }} > div .section-full-width-banner:has(.media > *) .section-full-width-banner__content {
        background-color: transparent;
    }
    {% endif %}
  }
{%- endstyle -%}

<div class="color-{{ section.settings.color_scheme }} gradient{% if enable_transparent_header %} header-is-transparent{% endif %}">
  <div
    class="section-full-width-banner__container container {{ section.settings.section_width }} section-height-{{ section.settings.section_height }} section-height-{{ section.settings.section_height_mobile }}--mobile media-position--{{ section.settings.media_position }} {{ section_media_classes }} js-animation-fade-in"
    data-id="{{ section.id }}"
    data-intersection-observer
    data-intersect-once
  >

      {%- assign inner_settings_classes = 'align-' | append: section.settings.content_alignment | append: ' text-' | append: section.settings.content_alignment | append: ' justify-' | append: section.settings.content_position | append: ' align-' | append: section.settings.content_alignment_mobile | append: '--mobile text-' | append: section.settings.content_alignment_mobile | append: '--mobile justify-' | append: section.settings.content_position_mobile | append: '--mobile' -%}

      {%- liquid
        if has_media
          assign inner_settings_classes = inner_settings_classes | append: ' has-desktop-media has-mobile-media'
        elsif has_media_mobile
          assign inner_settings_classes = inner_settings_classes | append: ' has-mobile-media'
        endif

        if section.settings.content_position == 'start'
          assign inner_settings_classes = inner_settings_classes | append: ' content-top'
        endif

        assign inner_settings_classes = inner_settings_classes | append: ' color-' | append: section.settings.color_scheme_for_content
      -%}

      {%- if section.blocks.size > 0 -%}
        {% capture content_element %}
          <div
            class="section-full-width-banner__content content full-width-banner__animation--body {{ inner_settings_classes | strip }} {% if settings.disable_animations_on_mobile %} full-width-banner__no-animation{% endif %}"
            data-animation-delay="150"
            data-animation-duration="450"
            data-animation-mobile="{{ settings.disable_animations_on_mobile }}"
          >
            {%- for block in section.blocks -%}

                {% liquid

                  assign show_on_class = block.settings.show_on | default: ''
                  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

                  assign block_class = 'section-full-width-banner__block' | append: ' full-width-banner__animation' | append: show_on_class
                %}

                {%- case block.type -%}

                  {%- when 'breadcrumbs' -%}
                    <div class="section-full-width-banner__breadcrumbs page-banner__breadcrumbs max-w-sm {{ block_class }}">
                      {%- render 'breadcrumbs', alignment: 'center' -%}
                    </div>

                  {%- when 'heading' -%}
                    <div class="section-full-width-banner__heading max-w-sm {{ block_class }}">
                      <{{ heading_tag }} class="section__heading {{ block.settings.heading_size }}">
                        {{- block.settings.heading | default: page.title | default: page_title -}}
                      </{{ heading_tag }}>
                    </div>

                  {%- when 'content' -%}
                    {%- if block.settings.content == blank -%}
                      {%- continue -%}
                    {%- endif -%}

                    <div class="section-full-width-banner__entry max-w-page max-w-sm entry{% unless section.settings.content_position_horizontal contains 'start' %} entry--list-padding-none{% endunless %} {{ block_class }}">
                      {{- block.settings.content -}}
                    </div>

                  {%- when 'subheading' -%}
                    {%- if block.settings.subheading == blank -%}
                      {%- continue -%}
                    {%- endif -%}

                    {%- if block.settings.link != blank -%}
                      <a href="{{- block.settings.link -}}" class="section-full-width-banner__subtitle max-w-sm {{ block_class }}">
                        {{- block.settings.subheading -}}
                      </a>
                    {%- else -%}
                      <p class="section-full-width-banner__subheading max-w-sm {{ block_class }}">
                        {{- block.settings.subheading -}}
                      </p>
                    {%- endif -%}

                  {%- when 'buttons' -%}
                    {%- if
                      block.settings.button_label_1 == blank or block.settings.button_link_1 == blank
                        and
                      block.settings.button_label_2 == blank or block.settings.button_link_2 == blank
                    -%}
                      {%- continue -%}
                    {%- endif -%}

                    <div class="section-full-width-banner__buttons max-w-sm {{ section.settings.content_position_horizontal }} {{ block_class }}">
                      {%- liquid
                        if block.settings.button_label_1 != blank and block.settings.button_link_1 != blank
                          render 'button', type: 'link', class: 'button section-full-width-banner__button', button_style: block.settings.button_style_1 | default: 'default', value: block.settings.button_label_1, href: block.settings.button_link_1, color_scheme: block.settings.color_scheme_first_button
                        endif

                        if block.settings.button_label_2 != blank and block.settings.button_link_2 != blank
                          render 'button', type: 'link', class: 'button section-full-width-banner__button', button_style: block.settings.button_style_2 | default: 'default', value: block.settings.button_label_2, href: block.settings.button_link_2, color_scheme: block.settings.color_scheme_second_button
                        endif
                      -%}
                    </div>
                {%- endcase -%}

            {%- endfor -%}

            {%- liquid
              assign section_buttons = section.blocks | where: 'type', 'buttons'
              for section_button in section_buttons
                if section_button.settings.button_link_1 != blank and section_button.settings.button_link_1_type == 'card'
                  echo '<a href="' | append: section_button.settings.button_link_1 | append: '" class="section-full-width-banner__link">&nbsp;</a>'
                endif
              endfor
            -%}
          </div>
        {% endcapture %}
      {%- endif -%}

      {%- if has_media -%}
        <div class="section-full-width-banner__media media media--overlay{% if section_video_controls %} media--with-controls{% endif %}{% if has_media_mobile %} small-hide{% endif %}">
          {%- liquid
            if section_video_external != blank
              render 'external-video', video: section_video_external, title: section.settings.title, controls: section_video_controls
            elsif section_video != blank
              echo section_video | video_tag: image_size: '2160x', loop: true, autoplay: true, muted: true, controls: section_video_controls
            else
              if section_image != blank
                render 'image', image: section_image, sizes: 'auto'
              elsif section.blocks.size == 0
                echo 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg'
              endif
            endif
          -%}
        </div>
        {%- if has_media_mobile -%}
          <div class="section-full-width-banner__media media media--overlay{% if section_video_controls_mobile %} media--with-controls{% endif %} small-up-hide">
            {%- liquid
              if section_video_external_mobile != blank
                render 'external-video', video: section_video_external_mobile, title: section.settings.title, controls: section_video_controls_mobile
              elsif section_video_mobile != blank
                echo section_video_mobile | video_tag: image_size: '720x', loop: true, autoplay: true, muted: true, controls: section_video_controls_mobile
              else
                if section_image_mobile != blank
                  render 'image', image: section_image_mobile, image_for_mobile: true, sizes: 'auto'
                elsif section.blocks.size == 0
                  echo 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg'
                endif
              endif
            -%}
          </div>
        {%- endif -%}
      {%- endif -%}

      {%- if section.blocks.size > 0 -%}
        {{ content_element }}
      {%- endif -%}

    </div>
</div>

{% schema %}
{
  "name": "t:sections.full-width-banner.name",
  "tag": "section",
  "class": "section-full-width-banner",
  "settings": [
    {
      "type": "checkbox",
      "id": "enable_transparent_header",
      "label": "t:sections.global.enable_transparent_header.label",
      "info": "t:sections.global.enable_transparent_header.info",
      "default": true
    },
    {
      "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": "header",
      "content": "t:sections.global.header.desktop.content"
    },
    {
      "type": "select",
      "id": "section_height",
      "label": "t:sections.global.section.height.label_alt",
      "info": "t:sections.global.section.height.info",
      "options": [
        {
          "value": "auto",
          "label": "t:sections.global.section.height.options.auto.label"
        },
        {
          "value": "third",
          "label": "t:sections.global.section.height.options.third.label"
        },
        {
          "value": "half",
          "label": "t:sections.global.section.height.options.half.label"
        },
        {
          "value": "full",
          "label": "t:sections.global.section.height.options.full.label"
        }
      ],
      "default": "half"
    },
    {
      "type": "select",
      "id": "content_position",
      "label": "t:sections.global.content.position.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.global.content.position.options.start.label"
        },
        {
          "value": "center",
          "label": "t:sections.global.content.position.options.center.label"
        },
        {
          "value": "end",
          "label": "t:sections.global.content.position.options.end.label"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "content_alignment",
      "label": "t:sections.global.content.alignment.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.global.content.alignment.options.start.label"
        },
        {
          "value": "center",
          "label": "t:sections.global.content.alignment.options.center.label"
        },
        {
          "value": "end",
          "label": "t:sections.global.content.alignment.options.end.label"
        }
      ],
      "default": "center"
    },
    {
      "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",
      "info": "t:sections.full-width-banner.settings.show_controls.info",
      "default": false
    },
    {
      "type": "select",
      "id": "aspect_ratio",
      "label": "t:sections.global.aspect_ratio.for__tile.label",
      "options": [
        {
          "value": "auto",
          "label": "t:sections.global.aspect_ratio.options.auto.label",
          "group": "t:sections.global.aspect_ratio.group__auto.label"
        },
        {
          "value": "1/1",
          "label": "1:1",
          "group": "t:sections.global.aspect_ratio.group__square.label"
        },
        {
          "value": "1/2",
          "label": "1:2",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "2/3",
          "label": "2:3",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "3/4",
          "label": "3:4",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "4/5",
          "label": "4:5",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "9/16",
          "label": "9:16",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "3/2",
          "label": "3:2",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "4/3",
          "label": "4:3",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "5/4",
          "label": "5:4",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "16/9",
          "label": "16:9",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "2/1",
          "label": "2:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "4/1",
          "label": "4:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "8/1",
          "label": "8:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        }
      ],
      "default": "auto"
    },
    {
      "type": "header",
      "content": "t:sections.global.header.mobile.content",
      "info": "t:sections.global.header.media_mobile.info"
    },
    {
      "type": "select",
      "id": "section_height_mobile",
      "label": "t:sections.global.section.height.for__mobile.label_alt",
      "info": "t:sections.global.section.height.info",
      "options": [
        {
          "value": "auto",
          "label": "t:sections.global.section.height.options.auto.label"
        },
        {
          "value": "third",
          "label": "t:sections.global.section.height.options.third.label"
        },
        {
          "value": "half",
          "label": "t:sections.global.section.height.options.half.label"
        },
        {
          "value": "full",
          "label": "t:sections.global.section.height.options.full.label"
        }
      ],
      "default": "half"
    },
    {
      "type": "select",
      "id": "content_position_mobile",
      "label": "t:sections.global.content.position.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.global.content.position.options.start.label"
        },
        {
          "value": "center",
          "label": "t:sections.global.content.position.options.center.label"
        },
        {
          "value": "end",
          "label": "t:sections.global.content.position.options.end.label"
        }
      ],
      "default": "center"
    },
    {
      "type": "select",
      "id": "content_alignment_mobile",
      "label": "t:sections.global.content.alignment.label",
      "options": [
        {
          "value": "start",
          "label": "t:sections.global.content.alignment.options.start.label"
        },
        {
          "value": "center",
          "label": "t:sections.global.content.alignment.options.center.label"
        },
        {
          "value": "end",
          "label": "t:sections.global.content.alignment.options.end.label"
        }
      ],
      "default": "center"
    },
    {
      "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",
      "info": "t:sections.full-width-banner.settings.show_controls.info",
      "default": false
    },
    {
      "type": "select",
      "id": "aspect_ratio_mobile",
      "label": "t:sections.global.aspect_ratio.for__tile.label",
      "options": [
        {
          "value": "auto",
          "label": "t:sections.global.aspect_ratio.options.auto.label",
          "group": "t:sections.global.aspect_ratio.group__auto.label"
        },
        {
          "value": "1/1",
          "label": "1:1",
          "group": "t:sections.global.aspect_ratio.group__square.label"
        },
        {
          "value": "1/2",
          "label": "1:2",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "2/3",
          "label": "2:3",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "3/4",
          "label": "3:4",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "4/5",
          "label": "4:5",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "9/16",
          "label": "9:16",
          "group": "t:sections.global.aspect_ratio.group__portrait.label"
        },
        {
          "value": "3/2",
          "label": "3:2",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "4/3",
          "label": "4:3",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "5/4",
          "label": "5:4",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "16/9",
          "label": "16:9",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "2/1",
          "label": "2:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "4/1",
          "label": "4:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        },
        {
          "value": "8/1",
          "label": "8:1",
          "group": "t:sections.global.aspect_ratio.group__landscape.label"
        }
      ],
      "default": "auto"
    },
    {
      "type": "header",
      "content": "t:sections.global.header.settings.content",
      "info": "t:sections.global.header.settings.info"
    },
    {
      "type": "select",
      "id": "section_width",
      "options": [
        {
          "value": "max-w-page",
          "label": "t:sections.global.settings.section_width.options__1.label"
        },
        {
          "value": "max-w-narrow",
          "label": "t:sections.global.settings.section_width.options__4.label"
        },
        {
          "value": "max-w-fluid",
          "label": "t:sections.global.settings.section_width.options__2.label"
        },
        {
          "value": "max-w-full",
          "label": "t:sections.global.settings.section_width.options__3.label"
        }
      ],
      "default": "max-w-full",
      "label": "t:sections.global.settings.section_width.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "default": "scheme-1",
      "label": "t:sections.global.color_scheme.label"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme_for_content",
      "label": "t:sections.global.color_scheme.for__content.label",
      "default": "scheme-5"
    },
    {
      "type": "select",
      "id": "spacing_inner",
      "label": "t:sections.global.spacing.inner.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    },
    {
      "type": "select",
      "id": "spacing_top",
      "label": "t:sections.global.spacing.top.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "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.spacing.bottom.label",
      "options": [
        {
          "value": "0",
          "label": "t:sections.global.spacing.options.none.label"
        },
        {
          "value": "1",
          "label": "S"
        },
        {
          "value": "2",
          "label": "M"
        },
        {
          "value": "4",
          "label": "L"
        },
        {
          "value": "6",
          "label": "XL"
        }
      ],
      "default": "2"
    }
  ],
  "max_blocks": 4,
  "blocks": [
    {
      "type": "heading",
      "limit": 1,
      "name": "t:sections.global.element.heading.label",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "heading",
          "label": "t:sections.global.element.heading.label",
          "default": "Headline full width banner"
        },
        {
          "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": "subheading",
      "limit": 1,
      "name": "t:sections.global.element.subheading.label",
      "settings": [
        {
          "type": "inline_richtext",
          "id": "subheading",
          "label": "t:sections.global.element.subheading.label",
          "default": "Enter a subheading for your full width image"
        },
        {
          "type": "url",
          "id": "link",
          "label": "t:sections.global.element.link.label",
          "info": "t:sections.global.element.optional.info"
        }
      ]
    },
    {
      "type": "content",
      "limit": 1,
      "name": "t:sections.full-width-banner.blocks.content.name",
      "settings": [
        {
          "type": "richtext",
          "id": "content",
          "label": "t:sections.global.element.text.label",
          "default": "<p>Add descriptive text to your full width banner.</p>"
        }
      ]
    },
    {
      "type": "breadcrumbs",
      "limit": 1,
      "name": "t:sections.global.element.breadcrumbs.label",
      "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": "buttons",
      "limit": 1,
      "name": "t:sections.full-width-banner.blocks.buttons.name",
      "settings": [
        {
          "type": "url",
          "id": "button_link_1",
          "label": "t:sections.global.element.button.link.for__button_1.label",
          "default": "/"
        },
        {
          "type": "select",
          "id": "button_link_1_type",
          "label": "t:sections.global.element.link.type.for__full_width_banner.label",
          "options": [
            {
              "value": "button",
              "label": "t:sections.global.element.link.type.options.button.label"
            },
            {
              "value": "card",
              "label": "t:sections.global.element.link.type.options.card.label"
            }
          ],
          "default": "button"
        },
        {
          "type": "text",
          "id": "button_label_1",
          "label": "t:sections.global.element.button_label.for__button_1.label"
        },
        {
          "type": "select",
          "id": "button_style_1",
          "label": "t:sections.global.element.button.style.for__button_1.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--outlined"
        },
        {
          "type": "color_scheme",
          "id": "color_scheme_first_button",
          "label": "t:sections.global.color_scheme.for__button_first.label",
          "default": "scheme-1"
        },
        {
          "type": "url",
          "id": "button_link_2",
          "label": "t:sections.global.element.button.link.for__button_2.label",
          "default": "/"
        },
        {
          "type": "text",
          "id": "button_label_2",
          "label": "t:sections.global.element.button_label.for__button_2.label"
        },
        {
          "type": "select",
          "id": "button_style_2",
          "label": "t:sections.global.element.button.style.for__button_2.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--outlined"
        },
        {
          "type": "color_scheme",
          "id": "color_scheme_second_button",
          "label": "t:sections.global.color_scheme.for__button_second.label",
          "default": "scheme-1"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "t:sections.full-width-banner.name",
      "blocks": [
        {
          "type": "subheading"
        },
        {
          "type": "heading"
        },
        {
          "type": "buttons"
        }
      ]
    }
  ]
}
{% endschema %}