{% liquid
  assign section_name = 'Intro Text'
  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 title_class = 'title-max-w-' | append: section.id
  assign text_class = 'text-max-w-' | append: section.id
  if section.settings.bg_overlay
    assign bg_overlay = "bg-overlay"
  endif
%}

<style>
  /* Mobile (default) */
  .{{ title_class }} {
    max-width: {{ section.settings.title_max_w_mobile }}px;
  }
  .{{ text_class }} {
    max-width: {{ section.settings.text_max_w_mobile }}px;
  }

  /* Tablet */
  @media (min-width: 768px) {
    .{{ title_class }} {
      max-width: {{ section.settings.title_max_w_tablet }}px;
    }
    .{{ text_class }} {
      max-width: {{ section.settings.text_max_w_tablet }}px;
    }
  }

  /* Desktop */
  @media (min-width: 1024px) {
    .{{ title_class }} {
      max-width: {{ section.settings.title_max_w_desktop }}px;
    }
    .{{ text_class }} {
      max-width: {{ section.settings.text_max_w_desktop }}px;
    }
  }
</style>

{%- capture title -%}
    {%- unless section.settings.title == blank -%}
      <{{ section.settings.title_element }} class="h2 {{ title_class }} pb-15 d-pb-25">
        {{ section.settings.title }}
      </{{ section.settings.title_element }}>
    {%- endunless -%}
  {%- endcapture -%}

{%- capture text -%}
    {%- unless section.settings.text == blank -%}
      <p class="p3 {{ text_class }} pb-20">{{ section.settings.text |  newline_to_br }}</p>
    {%- endunless -%}
{%- endcapture -%}

{% capture link_text %}
    {% unless section.settings.link_label == blank %}
        <a href="{{ section.settings.link_url }}" class="link1 uppercase">{{ section.settings.link_label }}</a>
    {% endunless %}
{% endcapture %}

<div id="{{ el_id }}" class="{{ padding_class }} {{ bg_overlay }}">
  <div class="container">
  <div class="flex flex-column ai-center d-ai-{{ section.settings.horizontal_align }} 
  {% if section.settings.horizontal_align == 'center' %} tc {% endif %}
  {% if section.settings.horizontal_align == 'end' %} tr {% endif %} 
  ">
    {{ title }}
    {{ text }}
    {{ link_text }}
  </div>
  </div>
</div>

{% schema %}
{
  "name": "Intro Text",
  "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": "select",
      "id": "horizontal_align",
      "label": "Title & Text Align (Desktop)",
      "options": [
        {
          "value": "start",
          "label": "Left"
        },
        {
          "value": "center",
          "label": "Center"
        },
        {
          "value": "end",
          "label": "Right"
        }
      ],
      "default": "center"
    },
    {
      "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"
        },
        {
          "value": "h5",
          "label": "h5"
        },
        {
          "value": "h6",
          "label": "h6"
        }
      ],
      "default": "h1"
    },
    {
      "type": "range",
      "id": "title_max_w_mobile",
      "unit": "px",
      "default": 320,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Title Max Width (Mobile)"
    },
    {
      "type": "range",
      "id": "title_max_w_tablet",
      "unit": "px",
      "default": 400,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Title Max Width (Tablet)"
    },
    {
      "type": "range",
      "id": "title_max_w_desktop",
      "unit": "px",
      "default": 540,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Title Max Width (Desktop)"
    },
    {
      "type": "textarea",
      "id": "text",
      "label": "Text"
    },
    {
      "type": "range",
      "id": "text_max_w_mobile",
      "unit": "px",
      "default": 320,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Text Max Width (Mobile)"
    },
    {
      "type": "range",
      "id": "text_max_w_tablet",
      "unit": "px",
      "default": 400,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Text Max Width (Tablet)"
    },
    {
      "type": "range",
      "id": "text_max_w_desktop",
      "unit": "px",
      "default": 540,
      "min": 0,
      "max": 1000,
      "step": 10,
      "label": "Text Max Width (Desktop)"
    },
    {
      "type": "text",
      "id": "link_label",
      "label": "Link Label"
    },
    {
      "type": "url",
      "id": "link_url",
      "label": "Link URL"
    }
  ],
  "presets": [
    {
      "name": "Intro Text",
      "blocks": []
    }
  ]
}
{% endschema %}