{% liquid
    
  assign section_name = 'Image + Text List'
  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
  if section.settings.bg_overlay
    assign bg_overlay = "bg-overlay"
  endif

  assign block_1 = product.metafields.custom.image_text_block_1.value
  assign block_2 = product.metafields.custom.image_text_block_2.value
%}
{% if block_1 != blank or block_2 != blank %}
<style>
    @media screen and (max-width: 1024px) {
      #{{ el_id }} .align-self-start {
      align-self: flex-start;
    }
    #{{ el_id }} .align-self-center {
      align-self: center;
    }
    #{{ el_id }} .align-self-end {
      align-self: flex-end;
    }
  }

  #{{ el_id }} .item__text,
  #{{ el_id }} .item__text p {
    overflow: hidden;
    color: var(--Brown, #59483D);
    text-overflow: ellipsis;
    font-family: "Atlas Grotesk";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 19px;
    letter-spacing: 0.12px;
  }

  #{{ el_id }} .global-image-wrapper {
    height: 100%;
  }
  #{{ el_id }} .global-image-wrapper img {
    object-fit: cover;
    height: 100%;
  }
  #{{ el_id }} .w-half {
    width: 50%;
  }

</style>

{% capture text_col %}
  {% unless section.settings.title == blank %}
    <{{ section.settings.title_element }} class="{{ section.settings.title_class }} pb-30 d-pb-95">
        {{ section.settings.title }}
    </{{ section.settings.title_element }}>
  {% endunless %}
  <div class="flex flex-column rowgap-35">
  {% for block in section.blocks %}
      <div class="flex flex-column jc-center rowgap-10 pr-35 d-pr-0 ">
          <div class="p3 bold-500">{{ block.settings.title }}</div>
          <div class="p3 item__text">{{ block.settings.text }}</div>
      </div>
  {% endfor %}
  </div>
{% endcapture %}  

{% capture image_col %}
  {% unless section.settings.image == blank %}
    {% assign image_alt = section.settings.title | escape %}

    {% render 'global-image-wrapper', image: section.settings.image, image_alt: image_alt %}
  {% endunless %}
{% endcapture %}

<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
  <div class="container">
    <div class="row flex flex-column d-flex-row h-full">
      
      <div class="push-d-1
          align-self-{{ section.settings.top_col_horizontal }}
          col-{{ section.settings.top_col_m }}
          col-t-{{ section.settings.top_col_t }} 
          col-d-{{ section.settings.left_col_d }} flex flex-column
          {% if section.settings.title != blank %} jc-between {% else %} jc-center {% endif %} 
          pb-40">

        {% if section.settings.image_position_d == 'left' %}
          {{ image_col }}
          {% else %}
          {{ text_col }}
        {% endif %}
        
      </div>

      <div class="push-d-2
        align-self-{{ section.settings.bottom_col_horizontal }}
        col-{{ section.settings.bottom_col_m }}
        col-t-{{ section.settings.bottom_col_t }}
        col-d-{{ section.settings.right_col_d }} flex flex-column jc-center">
          {% if section.settings.image_position_d == 'right' %}
            {{ image_col }}
            {% else %}
            {{ text_col }}
          {% endif %}
      </div>

    </div>
    </div>
</div>
{% endif %}
{% schema %}
{
  "name": "Image + Text List",
  "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": "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": "checkbox",
            "id": "bg_overlay",
            "label": "Background Overlay",
            "default": false
    },
    {
          "type": "header",
          "content": "General Settings"
    },
    {
        "type": "text",
        "id": "title",
        "label": "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"}
        ],
        "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"}
        ],
        "default": "h3"
    },
    {
      "type": "image_picker",
      "id": "image",
      "label": "Image"
    },
    {
      "type": "select",
      "id": "image_position_d",
      "label": "Image Position (Mobile & Tablet / Desktop)",
      "options": [
        { "value": "left", "label": "Left" },
        { "value": "right", "label": "Right" }
      ],
      "default": "right"
    },
    {
      "type": "range",
      "id": "top_col_m",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Top Column (Mobile)",
      "default": 12
    },
    {
      "type": "range",
      "id": "bottom_col_m",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Bottom Column (Mobile)",
      "default": 12
    },
    {
      "type": "range",
      "id": "top_col_t",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Top Column (Tablet)",
      "default": 12
    },
    {
      "type": "range",
      "id": "bottom_col_t",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Bottom Column (Tablet)",
      "default": 12
    },
    {
      "type": "range",
      "id": "left_col_d",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Left Column (Desktop)",
      "default": 4
    },
    {
      "type": "range",
      "id": "right_col_d",
      "min": 0,
      "max": 12,
      "step": 1,
      "unit": "col",
      "label": "Right Column (Desktop)",
      "default": 5
    },
    {
      "type": "header",
      "content": "Column Horizontal Alignment"
    },
    {
      "type": "select",
      "id": "top_col_horizontal",
      "label": "Top Column (Mobile & Tablet)",
      "options": [
        { "value": "start", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "end", "label": "Right" }
      ],
      "default": "start"
    },
    {
      "type": "select",
      "id": "bottom_col_horizontal",
      "label": "Bottom Column (Mobile & Tablet)",
      "options": [
        { "value": "start", "label": "Left" },
        { "value": "center", "label": "Center" },
        { "value": "end", "label": "Right" }
      ],
      "default": "start"
    }
  ],
  "blocks": [
    {
      "type": "feature",
      "name": "Feature",
      "settings": [
        {
          "type": "text",
          "id": "title",
          "label": "Title"
        },
        {
          "type": "richtext",
          "id": "text",
          "label": "Text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image + Text List",
      "blocks": []
    }
  ]
}
{% endschema %}