{% comment %}
  Render a component including a tag, a title and a description

  Assets:
  - tag: {String} Tag name (optional)
  - title_tag: {String} Html tag for title. Default: h2 (optional)
  - title: {String} Title of component (optional)
  - desc: {String} Description of component (optional)

  Usage:
  {%
      render 'heading-sub-title-desc',
      tag: 'Brand',
      title_tag: 'h2',
      title: 'Title of component',
      desc: 'Description of component'
   %}
{% endcomment %}

{% comment %} Assign title_tag is html tag 'h2' if title_tag doesn't value {% endcomment %}
{% if title_tag == blank %}
  {%- assign title_tag = 'h2' -%}
{% endif %}

{% comment %} Check description has html br tag exits. {% endcomment %}
{%- liquid
  assign descArr = desc | split: '<br>'
  assign titleArr = title | split: '<br>'
-%}

{%- if tag != blank -%}
  <div class='xo-sub-title-desc__tag'>{{ tag | escape }}</div>
{%- endif -%}

{% if title != blank %}
  <{{ title_tag }} class='xo-sub-title-desc__title'>
    {% for item in titleArr %}
      {% if forloop.index != forloop.length %}
        {{ item | escape }}
        <br>
      {%- else -%}
        {{ item | escape }}
      {% endif %}
    {% endfor %}
  </{{ title_tag }}>
{% endif %}

{% if desc != blank %}
  <div class='xo-sub-title-desc__desc'>
    {% for item in descArr %}
      {% if forloop.index != forloop.length %}
        {{ item | escape }}
        <br>
      {%- else -%}
        {{ item | escape }}
      {% endif %}
    {% endfor %}
  </div>
{% endif %}
