# 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
# 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(
  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 -%}

  <div class="u-fixed-width">
    <hr class="p-rule">

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

        <div class="row">
          <div class="col-6 col-start-large-7">
            {{ description_content }}
          </div>
        </div>
      {%- else -%}
        <div class="row">
          <div class="col-6">
            <div class="p-section--shallow">
              {{ title_content }}
            </div>
          </div>

          <div class="col-6">
            {{ description_content }}
          </div>
        </div>
      {%- endif -%}
    {%- else -%}
      <div class="u-fixed-width">
        <div class="p-section--shallow">
          {{ title_content }}
        </div>
      </div>
    {%- endif %}

    <div class="p-section--shallow">
      {%- 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 %}
            <div class="row">
              <div class="col-9 col-start-large-4">
                <hr class="is-muted">
              </div>
            </div>

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

              <div class="col-6">
                {{ list_item_description_content }}
              </div>
            </div>
          {%- else %}
            <div class="row">
              <div class="col-9 col-start-large-4">
                <hr class="is-muted">
              </div>
            </div>

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

              <div class="col-medium-3 col-6">
                {{ list_item_description_content }}
              </div>
            </div>
          {%- endif -%}
        {%- endif -%}
      {% endfor %}
    </div>

    {% if has_cta == true -%}
      <div class="p-cta-block">
        <div class="row">
          <div class="col-6 col-start-large-7">
            {{ cta_content }}
          </div>
        </div>
      </div>
    {%- endif %}
  </div>
{%- endmacro %}