# Params
# is_description_full_width_on_desktop: whether description has its own row on
#   desktop vs. 50/50 split between title/description
# is_list_full_width_on_tablet: whether list title/description each have their
#   own row on tablet vs. 50/50 split between title/description
# padding: Type of padding to apply. Options are "deep", "shallow", "default". Default is "default".
# Slots
# title: top-level title element
# description: top-level description element
# list_item_title_[1-25]: title element of each child list item
# list_item_description_[1-25]: description element of each child list item
# cta: CTA block element
{% macro vf_tiered_list(
  padding="default",
  is_description_full_width_on_desktop=true,
  is_list_full_width_on_tablet=true) -%}
  {%- set title_content = caller('title') -%}
  {%- set description_content = caller('description') -%}
  {%- set has_description = description_content|trim|length > 0 -%}
  {%- set cta_content = caller('cta') -%}
  {%- set has_cta = cta_content|trim|length > 0 -%}
  {%- set padding = padding | trim -%}
  {%- if padding not in ["deep", "shallow", "default"] -%}
    {%- set padding = "default" -%}
  {%- endif -%}
  {%- if padding == "default" -%}  
    {%- set padding_classes = "p-section" -%}  
  {%- else -%}  
    {%- set padding_classes = "p-section--" + padding -%}  
  {%- endif -%}

  <div class="{{ padding_classes }} u-fixed-width">
    <hr class="p-rule">
    <div class="p-section--shallow">
      {% if has_description == true -%}
        {%- if is_description_full_width_on_desktop == true -%}
          <div class="u-fixed-width">
            {{ title_content }}
          </div>

          <div class="grid-row">
            <div class="grid-col-4 grid-col-start-large-5">
              {{ description_content }}
            </div>
          </div>
        {%- else -%}
          <div class="grid-row--50-50-on-large">
            <div class="grid-col">
              {{ title_content }}
            </div>

            <div class="grid-col">
              {{ description_content }}
            </div>
          </div>
        {%- endif -%}
      {%- else -%}
        <div class="u-fixed-width">
          {{ title_content }}
        </div>
      {%- endif %}
    </div>

    {#-
      When there is a CTA, we use shallow spacing to space the list away from the CTA.
      When there is no CTA, shallow spacing would combine with the pattern-level p-section padding, which introduces too much space.
    -#}
    {%- if has_cta -%}
      <div class="p-section--shallow">
      {%- endif -%}
      {%- for number in range(1, 25) -%}
        {%- set list_item_title_content = caller('list_item_title_' + number|string) -%}
        {%- set has_title_content = list_item_title_content|trim|length > 0 -%}
        {%- set list_item_description_content = caller('list_item_description_' + number|string) -%}
        {%- set has_description_content = list_item_description_content|trim|length > 0 -%}

        {#- Check to see if title/description content exist, since we're
            iterating through 25 potential list items -#}
        {%- if has_title_content and has_description_content -%}
          {%- if is_list_full_width_on_tablet == true %}
            {#- Skip the first HR -#}
            {%- if number != 1 %}
              <div class="grid-row">
                <div class="grid-col-6 grid-col-start-large-3">
                  <hr class="is-muted">
                </div>
              </div>
            {%- endif -%}

            <div class="grid-row">
              <div class="grid-col-2 grid-col-start-large-3">{{ list_item_title_content }}</div>

              <div class="grid-col-4">{{ list_item_description_content }}</div>
            </div>
          {%- else %}
            {#- Skip the first HR -#}
            {%- if number != 1 %}
              <div class="grid-row">
                <div class="grid-col-6 grid-col-start-large-3">
                  <hr class="is-muted">
                </div>
              </div>
            {%- endif -%}

            <div class="grid-row">
              <div class="grid-col-medium-2 grid-col-2 grid-col-start-large-3">
                {{ list_item_title_content }}
              </div>

              <div class="grid-col-medium-2 grid-col-4">
                {{ list_item_description_content }}
              </div>
            </div>
          {%- endif -%}
        {%- endif -%}
      {% endfor %}
      {%- if has_cta -%}
      </div>
    {%- endif -%}

    {% if has_cta == true -%}
      <div class="grid-row">
        <hr class="p-rule--muted">
        <div class="grid-col-4 grid-col-start-large-5">
          <p>
            {{ cta_content }}
          </p>
        </div>
      </div>
    {%- endif %}
  </div>
{%- endmacro %}