# Params
# title_text (string) (required): Title of the rich horizontal list
# layout (string) (optional): layout of the rich horizontal list. Options are "full-width", "50/50"
# list_item_style (string) (optional): Style of the list items. Options are "bullet", "tick", "number"
# Slots
# image (optional): Image displayed at the top of the pattern
# description (optional): Description paragraph
# logo_section_items (optional): Block of `.p-logo-section__item` elements, ideally between 4 and 8 items.
# cta (optional): Call to action area, likely a paragraph element with a button and a link
# list_item_[1-8]: List item contents for items in the `.p-list--horizontal-section`. Each will be wrapped in a `li.p-list__item` element, with the item style decided by the `list_item_style` parameter.
{% macro vf_rich_horizontal_list(
  title_text,
  layout="full-width",
  list_item_style=""
) -%}
  {% set image_content = caller("image") %}
  {% set description_content = caller("description") %}
  {% set logo_section_content = caller("logo_section_items") %}
  {% set cta_content = caller("cta") %}
  {% set has_image = image_content|trim|length > 0 %}
  {% set has_logo_section = logo_section_content|trim|length > 0 %}
  {% set has_list = caller("list_item_1")|trim|length > 0 %}
  {% set has_cta = cta_content|trim|length > 0 %}
  {% set has_description = description_content|trim|length > 0 %}
  {% set max_list_items = 8 %}

  {% set list_item_style = list_item_style|trim|lower %}
  {% set layout = layout|trim|lower|replace("/", "-") %}

  {% if list_item_style|length > 0 and list_item_style not in ["bullet", "tick", "number"] %}
    {% set list_item_style = "" %}
  {% endif %}

  {% if layout not in ["full-width", "50-50"] %}
    {% set layout = "full-width" %}
  {% endif %}

  {#- 50/50 layout requires that content for the right column is passed in -#}
  {% if layout == "50-50" and not has_description and not has_logo_section %}
    {% set layout = "full-width" %}
  {% endif %}

  {% if list_item_style == "bullet" %}
    {% set list_item_class = "has-bullet" %}
  {% elif list_item_style == "tick" %}
    {% set list_item_class = "is-ticked" %}
  {% endif %}

  {% set list_element_type = "ul" %}
  {% if list_item_style == "number" %}
    {% set list_element_type = "ol" %}
  {% endif %}

  {#-
    Construct list of list items using caller in the top-level macro
    The internal _list macro will not have access to the caller block, so we need to extract the list items here.
  -#}
  {% set list_items = [] %}
  {%- if has_list %}
    {% for list_item_index in range(1, max_list_items + 1) %}
      {% set list_item_content = caller('list_item_' + list_item_index|string) %}
      {% set has_list_item_content = list_item_content|trim|length > 0 %}
      {% if has_list_item_content %}
        {{- list_items.append(list_item_content) or "" -}}
      {% endif %}
    {% endfor %}
  {%- endif -%}

  {%- macro _list(list_items) -%}
    {%- if has_list %}
      <div class="p-list--horizontal-section-wrapper">
        <{{ list_element_type }} class="p-list--horizontal-section">
          {%- for list_item_content in list_items -%}
            <li class="p-list__item {{ list_item_class }}">
              {{- list_item_content -}}
            </li>
          {%- endfor -%}
        </{{ list_element_type }}>
      </div>
    {%- endif -%}
  {%- endmacro -%}
  
  {%- macro _logo_section(logo_section_content) -%}
    <div class="p-logo-section">
      <div class="p-logo-section__items">
        {{- logo_section_content -}}
      </div>
    </div>
  {%- endmacro -%}

  <div class="p-section">
    <div class="grid-row">
      {%- if has_image %}
        {{- image_content -}}
      {%- endif -%}
      {%- if layout == "50-50" %}
        <div class="grid-col-8">
          <div class="grid-row">
            {#- If there is a description, split the title and description. Otherwise, the title spans full width. -#}
            <div class="grid-col-4{% if has_description %} grid-col-medium-2{% endif %}">
              <div class="p-section--shallow">
                <h2>{{- title_text -}}</h2>
              </div>
            </div>
            {%- if has_description %}
              <div class="grid-col-4 grid-col-medium-2">
                {{- description_content -}}
              </div>
            {%- endif -%}
            {%- if has_logo_section %}
              {#- When the description is present, the logo section wraps to another line, so we need to offset it to align with the description. -#}
              <div class="grid-col-4{% if has_description %} grid-col-start-large-5{% endif %}">
                {{- _logo_section(logo_section_content) -}}
              </div>
            {%- endif -%}
            {%- if has_list %}
              <div class="grid-col-8">
                {{- _list(list_items) -}}
              </div>
            {%- endif -%}
            {%- if has_cta %}
              <hr class="p-rule--muted"/>
              <div class="grid-col-8 grid-col-start-large-5">
                {{- cta_content -}}
              </div>
            {%- endif -%}
          </div>
        </div>
      {#- Full-width layout -#}
      {%- else %}
        <div class="p-section--shallow">
          <h2>{{- title_text -}}</h2>
        </div>
        {%- if has_logo_section %}
          <div class="grid-col-8 grid-col-order-small-2">
            {{- _logo_section(logo_section_content) -}}
          </div>
        {%- endif -%}
        {% if has_description %}
          <div class="grid-col-8 grid-col-order-small-1">
            {{- description_content -}}
          </div>
        {% endif %}
        {%- if has_list %}
          <div class="grid-col-8 grid-col-order-small-2">
            {{- _list(list_items) -}}
          </div>
        {%- endif -%}
        {%- if has_cta %}
          <div class="grid-col-8 grid-col-order-small-2">
            <hr class="p-rule--muted"/>
          </div>
          <div class="grid-col-4 grid-col-start-large-5 grid-col-order-small-2">
            {{- cta_content -}}
          </div>
        {%- endif -%}
      {%- endif %}
    </div>
  </div>

{%- endmacro %}