{% liquid
  
  assign section_name = 'Text + Links'
  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

  assign has_content = false
  if section.settings.title != blank or section.settings.text != blank
    assign has_content = true
  endif

%}

{% if has_content %}

<style>

  #{{ el_id }} ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    column-gap: 90px;
  }

  @media (min-width: 1024px) {
    #{{ el_id }} ul {
      column-gap: 0px;
    }
  }

  #{{ el_id }} ul li + li {
    margin-top: 12px;
  }
     

  #{{ el_id }} p {
    width: 340px;
  }

  @media (min-width: 1024px) {
    #{{ el_id }} p {
      width: auto;
    }
    #{{ el_id }} article {
      row-gap: 12px;
    }
  }

</style>

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

{% capture text %}
  {% unless section.settings.text == blank %}
    <p>
      <span class="p3">{{ section.settings.text }}</span>
      <a tabindex="-1" class="link3 hide-m">
        <span class="p3">Read More</span>
      </a>
    </p>
  {% endunless %}
{% endcapture %}

{% capture links %}
  <ul>
    {% for block in section.blocks %}
      {% if block.settings.text != blank %}
        <li>
          <a href="{{ block.settings.url }}" class="link3">
            <span class="p3">{{ block.settings.text }}</span>
          </a>
        </li>
      {% endif %}
    {% endfor %}
  </ul>
{% endcapture %}

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

<div id="{{ el_id }}" class="{{ section_classes }} container">
  <div class="row">
    <div class="flex flex-column d-flex-row d-ai-center">
      <div class="col-12 col-d-7">
        <article class="flex flex-column rowgap-15 max-343 d-max-540">
          {{ title }}
          {{ text }}
        </article>
      </div>
      <div class="col-12 col-d-5 mt-30 d-mt-0">{{ links }}</div>
    </div>
  </div>
</div>

<script>

  document.addEventListener('DOMContentLoaded', function(e) {
    
    const $text = document.querySelector("#{{ el_id }} p span");
    const $more_btn = document.querySelector("#{{ el_id }} p a");

    if (!$text || !$more_btn) return;

    const text = $text.innerText.replace('|', '')
    const chunked_text_arr = $text.innerText.split('|')
    if (chunked_text_arr.length > 1) {
      $more_btn.style.display = 'inline'
      $text.innerText = $text.innerText.split('|').at(0) + "..."
      $more_btn.addEventListener('click', function() {
        $text.innerText = text
        this.style.display = 'none'
      })
    } else {
      $more_btn.style.display = 'none'
    }
  })

</script>

{% endif %}

{% schema %}
{
  "name": "Text + Links",
  "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": "text",
      "id": "title",
      "label": "Title",
      "default": "Title"
    },
    {
      "type": "text",
      "id": "text",
      "label": "Text",
      "default": "Text",
      "info": "Place \"|\" character to split text with read more button"
    },
  ],
  "blocks": [
    {
      "type": "link",
			"name": "Link",
      "settings": [
        {
					"type": "text",
					"id": "text",
					"label": "Text",
          "default": "Text"
				},
        {
          "type": "url",
          "id": "url",
          "label": "URL"
        },
      ]
    }
  ],
  "presets": [
    {
			"name": "Text + Links",
      "blocks": []
	  }
  ]
}
{% endschema %}