{% liquid
  
  assign section_name = 'Static Banner'
  assign el_id = section_name | handle | append: '-' | append: section.id

  assign section_padding = section.settings.padding
  assign padding_class = 'sp-' | append: section_padding
  if section.settings.top_half_padding
    assign padding_class = padding_class | append: ' spt-' | append: section_padding | append: '-half'
  endif
  if section.settings.bottom_half_padding
    assign padding_class = padding_class | append: ' spb-' | append: section_padding | append: '-half'
  endif

%}

<style>

  .{{ el_id }}__inner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: white;
    z-index: 2;
  }

  .{{ el_id }}__mask-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 11, 11, 0.20);
    mix-blend-mode: multiply;
    opacity: 1;
  }

  @media only screen and (min-width: 1024px) {

    .{{ el_id }}__inner {
      padding-top: 120px;
      padding-bottom: 80px;
    }
    
  }

</style>

{% liquid
  assign media_alt = section.settings.title | strip_html
  assign media_id = el_id | append: '-media'
  assign overlay_class = el_id | append: "__mask-overlay"
%}

{% capture title %}
  {% unless section.settings.title == blank %}
    <{{ section.settings.title_element }} class="{{ section.settings.title_class }}">
      {{ section.settings.title }}
    </{{ section.settings.title_element }}>
  {% endunless %}
{% endcapture %}

{% capture text %}
  {% unless section.settings.text == blank %}
    <p class="{{ section.settings.text_class }}">
      {{ section.settings.text }}
    </p>
  {% endunless %}
{% endcapture %}

{% capture link %}
  {% unless section.settings.link_label == blank %}
    <span class="{{ section.settings.link_class }}">
      {{ section.settings.link_label }}
    </span>
  {% endunless %}
{% endcapture %}

{% capture image_render %}
  {% if section.settings.image or section.settings.image_m %}
    {% render 'global-image-wrapper-responsive',
      desktop_image: section.settings.image,
      mobile_image: section.settings.image_m,
      image_id: media_id,
      preload: section.settings.preload_image,
      image_alt: media_alt,
      overlay: true,
      overlay_class: overlay_class
    %}
  {% endif %}
{% endcapture %}

{% capture video_render %}
  {% if section.settings.video %}
    {{
      section.settings.video
      | video_tag:
        image_size: '1100x',
        controls: false,
        loop: true,
        autoplay: true,
        muted: true,
        playsinline: true,
        preload: 'auto',
        class: 'hide-m show-t w-full'
    }}
  {% endif %}
  {% if section.settings.video_m %}
    {{
      section.settings.video_m
      | video_tag:
        image_size: '1100x',
        controls: false,
        loop: true,
        autoplay: true,
        muted: true,
        playsinline: true,
        preload: 'auto',
        class: 'hide-t w-full'
    }}
  {% endif %}
{% endcapture %}

<div id="{{ el_id }}" class="{{ padding_class }} relative">
  {% if section.settings.media_type == "image" %}
    {{ image_render }}
  {% elsif section.settings.media_type == "video" %}
    {{ video_render }}
  {% endif %}
  {% assign wrapper_el = "div" %}
  {% assign href = "" %}
  {% if section.settings.link_url %}
    {% assign wrapper_el = "a" %}
    {% assign href = section.settings.link_url %}
  {% endif %}
  <{{ wrapper_el }}
    {% if href != blank %}href="{{ href }}"{% endif %}
    class="{{ el_id }}__inner container flex"
  >
    <div class="flex flex-column jc-center d-jc-between w-full rowgap-20">
      <div class="tc d-tl">{{ title }}</div>
      <div class="flex jc-center d-jc-end">
        <div class="tc d-tl d-max-320 flex flex-column rowgap-15 d-rowgap-20">
          {{ text }}
          {{ link }}
        </div>
      </div>
    </div>
  </{{ wrapper_el }}>
</div>

{% schema %}
{
  "name": "Hero Banner",
  "settings": [
    {
      "type": "header",
      "content": "Section Padding"
    },
    {
      "type": "select",
      "id": "padding",
      "label": "Padding",
      "options": [
        { "value": "no", "label": "No" },
        { "value": "sm", "label": "Small" },
        { "value": "md", "label": "Med" },
        { "value": "lg", "label": "Large" }
      ],
      "default": "no"
    },
    {
      "type": "checkbox",
      "id": "top_half_padding",
      "label": "Top Half Padding",
      "default": false
    },
    {
      "type": "checkbox",
      "id": "bottom_half_padding",
      "label": "Bottom Half Padding",
      "default": false
    },
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "select",
      "id": "media_type",
      "label": "Media Type",
      "options": [
        { "label": "Image", "value": "image" },
        { "label": "Video", "value": "video" },
      ],
      "default": "image"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image (Tablet and All Desktop)"
    },
    {
      "type": "image_picker",
      "id": "image_m",
      "label": "Image (Mobile)"
    },
    {
      "type": "checkbox",
      "id": "preload_image",
      "label": "Preload Image"
    },
    {
      "type": "video",
      "id": "video",
      "label": "Video (Tablet and All Desktop)"
    },
    {
      "type": "video",
      "id": "video_m",
      "label": "Video (Mobile)"
    },
    {
      "type": "header",
      "content": "Content"
    },
    {
      "type": "textarea",
      "id": "title",
      "label": "Title",
      "default": "Static Banner Title"
    },
    {
      "type": "select",
      "id": "title_element",
      "label": "Title Element",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" }
      ],
      "default": "h2"
    },
    {
      "type": "select",
      "id": "title_class",
      "label": "Title Class",
      "options": [
        { "value": "h1", "label": "h1" },
        { "value": "h2", "label": "h2" },
        { "value": "h3", "label": "h3" },
        { "value": "h4", "label": "h4" },
        { "value": "h5", "label": "h5" },
        { "value": "h6", "label": "h6" },
        { "value": "h7", "label": "h7" },
      ],
      "default": "h2"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Text",
      "default": "Static Banner Text"
    },
    {
      "type": "select",
      "id": "text_class",
      "label": "Text Class",
      "options": [
        { "value": "p1", "label": "p1" },
        { "value": "p2", "label": "p2" },
        { "value": "p3", "label": "p3" },
        { "value": "p4", "label": "p4" },
        { "value": "p5", "label": "p5" },
      ],
      "default": "p3"
    },
    {
      "type": "text",
      "id": "link_label",
      "label": "Link Label"
    },
    {
      "type": "select",
      "id": "link_class",
      "label": "Link Class",
      "options": [
        { "value": "link1", "label": "link1" },
        { "value": "link2", "label": "link2" },
        { "value": "link3", "label": "link3" },
      ],
      "default": "link2"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "Link URL"
    },
  ],
  "presets": [
    {
			"name": "Static Banner"
	  }
  ]
}
{% endschema %}