{{ 'section-banner-v2.css' | asset_url | stylesheet_tag }}

<div {% render 'section-attr' %}>
  {% render 'section-bg-image' %}
  <xo-container
    {% render 'section-layout' %}
  >
    <xo-animate>
      <xo-grid>
        <div class='banner-v5__box' style='--sm:12; --md:5'>
          <div class='banner-v5__subtitle'>{{ section.settings.subtitle }}</div>
          <h3 class='banner-v5__title'>{{ section.settings.title }}</h3>
          <div class='banner-v5__description'>{{ section.settings.description }}</div>
          <xo-modal-trigger xo-name='banner-v5-video' class='banner-v5__trigger'>
            {%- if section.settings.button_text -%}
              <button class='banner-v5__btn'>
                <svg
                  xmlns='http://www.w3.org/2000/svg'
                  viewBox='0 0 48 48'
                  id='Play'
                  class='banner-v5__icon'
                >
                  <path
                    d="M12 39c-.549 0-1.095-.15-1.578-.447A3.008 3.008 0 0 1 9 36V12c0-1.041.54-2.007 1.422-2.553a3.014 3.014 0 0 1 2.919-.132l24 12a3.003 3.003 0 0 1 0 5.37l-24 12c-.42.21-.885.315-1.341.315z"
                    fill="#ffffff"
                    class="color000000 svgShape"
                  ></path>
                </svg>
                <span>
                  {{ section.settings.button_text }}
                </span>
              </button>
            {%- endif -%}
          </xo-modal-trigger>
        </div>
      </xo-grid>
    </xo-animate>
  </xo-container>
</div>

<xo-modal xo-name='banner-v5-video' xo-animate='zoom' class='banner-v5__modal'>
  <xo-modal-trigger class='banner-v5__modal-close'>
    {% render 'icon', name: 'close-small', icon_size: '25' %}
  </xo-modal-trigger>
  {% render 'video', video: section.settings.video, video_url: section.settings.video_url, autoplay: false %}
  {% comment %}
    {%- if section.settings.show_video_url -%}
    {%- else -%}
      {% render 'video', video: section.settings.video, autoplay: false %}
    {%- endif -%}
  {% endcomment %}
</xo-modal>

{% schema %}
{
  "name": "t:sections.banner_v2.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "select",
      "id": "width",
      "label": "t:sections.all.width.label",
      "default": "box",
      "options": [
        {
          "value": "box",
          "label": "t:sections.all.width.options__1.label"
        },
        {
          "value": "wide",
          "label": "t:sections.all.width.options__2.label"
        },
        {
          "value": "fullwidth",
          "label": "t:sections.all.width.options__3.label"
        }
      ]
    },
    {
      "type": "text",
      "id": "subtitle",
      "label": "t:sections.banner_v2.settings.subtitle.label"
    },
    {
      "type": "text",
      "id": "title",
      "label": "t:sections.banner_v2.settings.title.label"
    },
    {
      "type": "text",
      "id": "description",
      "label": "t:sections.banner_v2.settings.description.label"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Play Text",
      "default": "PLAY"
    },
    {
      "type": "video",
      "id": "video",
      "label": "t:sections.banner_v2.settings.video.import"
    },
    {
      "type": "video_url",
      "id": "video_url",
      "label": "t:sections.banner_v2.settings.video.url",
      "accept": [
        "youtube",
        "vimeo"
      ]
    },
    {
      "type": "header",
      "content": "t:sections.all.heading.content"
    },
    {
      "type": "color_scheme",
      "id": "color_scheme",
      "label": "t:sections.all.color_scheme.label"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "t:sections.all.bg_color.label"
    },
    {
      "type": "color_background",
      "id": "background_gradient",
      "label": "t:sections.all.bg_gradient.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_desktop",
      "label": "t:sections.all.background_image_desktop.label"
    },
    {
      "type": "image_picker",
      "id": "background_image_mobile",
      "label": "t:sections.all.background_image_mobile.label"
    },
    {
      "type": "checkbox",
      "id": "use_parallax",
      "label": "t:sections.all.use_parallax.label",
      "default": true
    },
    {
      "type": "number",
      "id": "padding_top",
      "label": "t:sections.all.padding_top.label",
      "default": 50
    },
    {
      "type": "number",
      "id": "padding_bottom",
      "label": "t:sections.all.padding_bottom.label",
      "default": 50
    }
  ],
  "presets": [
    {
      "name": "t:sections.banner_v2.presets.name",
      "category": "Text"
    }
  ]
}
{% endschema %}
