{% liquid
  
  assign section_name = 'Page Title V2'
  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 }}__slider {
    margin-left: -15px;
    margin-right: -15px;
  }

  .{{ el_id }}__slider a figure,
  .{{ el_id }}__slider .flex.colgap-20 figure {
    width: 78px;
    flex: none;
  }

  .{{ el_id }}__slider a > div,
  .{{ el_id }}__slider .flex.colgap-20 > div {
    flex: auto;
    row-gap: 8px;
  }

  .{{ el_id }}__slider span.p4 {
    padding: 4px 8px;
    border: 1px solid var(--light-grey);
  }

  .{{ el_id }}__slider a > div p,
  .{{ el_id }}__slider .flex.colgap-20 > div p {
    text-wrap: balance;
  }

  #{{ el_id }} ul,
  #{{ el_id }} ul li {
    display: inline-block;
  }

  #{{ el_id }} ul li {
    margin: 0 2px;
  }

  @media only screen and (min-width: 600px) {
    
    .{{ el_id }}__slider {
      margin-left: -20px;
      margin-right: -20px;
    }

  }

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

    .{{ el_id }}__slider {
      margin-left: initial;
      margin-right: initial;
    }

    .{{ el_id }}__slider a figure,
    .{{ el_id }}__slider .flex.colgap-20 figure {
      width: 60px;
    }

    .{{ el_id }}__slider a > div p,
    .{{ el_id }}__slider .flex.colgap-20 > div p {
      text-wrap: initial;
    }

  }

</style>

{% liquid
  assign section_classes = padding_class | append: " container"
  if section.settings.use_bg_overlay
    assign section_classes = section_classes | append: " bg-overlay"
  endif
%}

{% capture arrow_svg %}
<svg xmlns="http://www.w3.org/2000/svg" width="8" height="9" viewBox="0 0 8 9" fill="none">
  <path d="M3.44434 7.5L0.999892 4.5L3.44434 1.5" stroke="#59483D" stroke-linecap="square"/>
  <path d="M1.22222 4.5L7 4.5" stroke="#59483D" stroke-linecap="square" stroke-linejoin="round"/>
</svg>
{% endcapture %}

<div id="{{ el_id }}" class="{{ section_classes }} container">
  <div class="flex jc-center">
    <div class="flex flex-column rowgap-25 d-rowgap-50 w-full d-max-1230">
      <div class="tl d-tc flex flex-column rowgap-25 d-rowgap-35">
        {% liquid
          assign title = section.settings.title | default: "N/A"
        %}
        <div class="show-m hide-d">
          <a href="/" class="flex ai-center colgap-10 p5">
            <i class="flex ai-center">{{ arrow_svg }}</i> Home
          </a>
        </div>
        <div class="hide-m show-d">
          <ul class="p5 opacity-5">
            <li>Home</li>
            <li>•</li>
            <li>{{ title }}</li>
          </ul>
        </div>
        <h1 class="h3 show-m hide-d">{{ title }}</h1>
        <p class="h2 hide-m show-d">{{ title }}</p>
      </div>
      <div class="{{ el_id }}__slider swiper">
        <div class="swiper-wrapper">
          {% for block in section.blocks %}
            <div class="swiper-slide">
              {% if block.settings.url != blank %}
                <a href="{{ block.settings.url }}" class="flex colgap-20">
              {% else %}
                <div class="flex colgap-20">
              {% endif %}
                <figure>
                  {% unless block.settings.image == blank %}
                    {% assign image_alt = block.settings.text %}
                    {% render 'global-image-wrapper',
                      image: block.settings.image,
                      image_alt: image_alt
                    %}
                  {% endunless %}
                </figure>
                <div class="flex flex-column">
                  <div class="flex ai-center colgap-15">
                    <h5 class="p5">{{ block.settings.title }}</h5>
                    {% unless block.settings.label == blank %}
                      <span class="p4">{{ block.settings.label }}</span>
                    {% endunless %}
                  </div>
                  <p class="p3">{{ block.settings.text }}</p>
                </div>
              {% if block.settings.url != blank %}
                </a>
              {% else %}
                </div>
              {% endif %}
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>

  {%- assign func_name_postfix = section.id | replace: '-', '' -%}
  function init_{{ func_name_postfix }}() {
    new Swiper('.{{ el_id }}__slider', {
      autoHeight: true,
      spaceBetween: 30,
      slidesPerView: 1.3,
      slidesOffsetBefore: 15,
      slidesOffsetAfter: 15,
      breakpoints: {
        600: {
          slidesPerView: 2.6,
          slidesOffsetBefore: 20,
          slidesOffsetAfter: 20,
        },
        1024: {
          slidesPerView: 4,
          slidesOffsetBefore: 0,
          slidesOffsetAfter: 0,
        },
      },
      on: {
        init: function() {
          $360.lazyLoadInstance.update();
        },
      }
    });
  }
  document.addEventListener('DOMContentLoaded', function() {
    init_{{ func_name_postfix }}();
  });
  document.addEventListener('shopify:section:load', function() {
    init_{{ func_name_postfix }}();
  });

</script>

{% schema %}
{
  "name": "Page Title V2",
  "settings": [
    {
      "type": "header",
      "content": "Section General"
    },
    {
      "type": "checkbox",
      "id": "use_bg_overlay",
      "label": "Use Background Overlay",
      "info": "Class .bg-overlay will be applied to this section when checked"
    },
    {
      "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": "md"
    },
    {
      "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": "Title"
    },
    {
      "type": "text",
      "id": "title",
      "label": "Title",
      "default": "Page Title"
    }
  ],
  "blocks": [
    {
      "type": "item",
      "name": "Image + Text",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Title"
        },
        {
          "type": "text",
          "id": "label",
          "label": "Label"
        },
        {
          "type": "text",
          "id": "text",
          "label": "Text",
          "default": "Text"
        },
        {
          "type": "url",
          "id": "url",
          "label": "URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Page Title V2",
      "blocks": []
    }
  ]
}
{% endschema %}