# Params
# title_text (string) (required): Title of the rich vertical list
# list_item_tick_style (string) (optional): Type of list item tick styling. Options are "bullet", "tick", "number".
# is_flipped (boolean) (optional): Whether the list items are flipped so image is on the left and the text is on the right. Defaults to false.
# Slots
# description: Paragraph-style description content
# logo_section Logo section block
# list_item_[1-7]: List item content, assumed to be li.p-list__item
# image (required)
{% macro vf_rich_vertical_list(
  title_text,
  list_item_tick_style="",
  is_flipped=false
) -%}
  {% set description_content = caller('description') %}
  {% set has_description = description_content|trim|length > 0 %}
  {% set logo_section_content = caller('logo_section') %}
  {% set has_logo_section = logo_section_content|trim|length > 0 %}
  {% set cta_content = caller('cta') %}
  {% set has_cta = cta_content|trim|length > 0 %}
  {% set has_list = caller('list_item_1')|trim|length > 0 %}
  {% set image_content = caller('image') %}
  {% set max_list_items = 7 %}

  {% set list_item_tick_style=list_item_tick_style|trim|lower %}
  {% if list_item_tick_style|length > 0 and list_item_tick_style not in ['bullet', 'tick', 'number'] %}
    {% set list_item_tick_style = '' %}
  {% endif %}

  {% if list_item_tick_style == "bullet" %}
    {% set list_item_tick_class = "has-bullet" %}
  {% elif list_item_tick_style == "tick" %}
    {% set list_item_tick_class = "is-ticked" %}
  {% endif %}

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

  {#-
    Construct list of list items using caller in the top-level macro
    The _text_column_contents 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 _text_column_contents(list_items) %}
    {#- Mandatory title -#}
    <div class="p-section--shallow">
      <h2>{{ title_text }}</h2>
    </div>

    {%- if has_logo_section %}
      {#- Optional logo section -#}
      <div class="p-section--shallow">
        <div class="u-fixed-width">
        {{- logo_section_content -}}
        </div>
      </div>
    {%- endif -%}

    {%- if has_description %}
      {#- Optional description -#}
      <div class="p-section--shallow">
        {{- description_content -}}
      </div>
    {%- endif -%}

    {%- if list_items|length > 0 %}
      {#- Optional list -#}
      <{{ list_element_type }} class="p-list--divided">
       {% for list_item in list_items %}
         <li class="p-list__item {{ list_item_tick_class }}">
           {{- list_item -}}
         </li>
        {% endfor %}
      </{{ list_element_type }}>
    {%- endif -%}

    {%- if has_cta %}
      {#- Optional CTA block -#}
      <div class="p-cta-block">
        {{- cta_content -}}
      </div>
    {%- endif -%}

  {%- endmacro -%}

  {%- macro _image_column_contents() %}
    {#- Mandatory image -#}
    <div class="p-section--shallow">
      {{- image_content -}}
    </div>
  {%- endmacro -%}

  <div class="p-section">
    <div class="row--50-50-on-large">
      <hr>
      {% if not is_flipped -%}
        <div class="col">
          {{- _text_column_contents(list_items) -}}
        </div>
        <div class="col">
          {{- _image_column_contents() -}}
        </div>
      {%- else -%}
        {#- For flipped layout, place the image contents in the first column and the text in the second column -#}
        <div class="col">
          {{- _image_column_contents() -}}
        </div>
        <div class="col">
          {{- _text_column_contents(list_items) -}}
        </div>
      {%- endif -%}
    </div>
  </div>

{%- endmacro %}