# 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".
# top_rule_variant: Variant of the horizontal rule rendered at the top of the pattern.
#   Options are "default", "muted", "highlighted", "none". Default is "default".
# is_media_full_width: whether the media is full width
# media_placement: where the media is placed. Options are "before_description", "after_description", or "after_cta". Default is "after_cta".
# img_attrs: attributes for the image element, e.g. src, alt, class
# video_attrs: attributes for the video element.
#   Pass "src" (e.g. a YouTube embed URL) to render a standard iframe embed, e.g. {"src": "...", "title": "...", "class": "..."}.
#   Pass "video_id" (and ideally "video_title") to render a lite-youtube embed instead,
#   e.g. {"video_id": "rPJEZ_tr_1w", "video_title": "Scaling Android development with Anbox Cloud"}.
#   Any other keys are forwarded as attributes onto the rendered element.
#   Consumers using lite-youtube must load the lite-youtube script themselves.
# media_aspect_ratio: aspect ratio of the media. Options are "3-2" or "16-9". Default is "3-2". If is_media_full_width is true, this will be set to "cinematic". Only applies to images, not videos. Videos always have a 16:9 aspect ratio.
# hide_media_on_small_medium_breakpoints: whether to hide media on medium and small screens. Default is false.
# is_media_highlighted: Whether to apply the "is-highlighted" class to the media container (default is false) (only applies to image media type).
# 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
{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
{% macro vf_tiered_list(
  padding="default",
  is_description_full_width_on_desktop=true,
  is_list_full_width_on_tablet=true,
  top_rule_variant="default",
  is_media_full_width=false,
  media_placement="after_description",
  img_attrs={},
  video_attrs={},
  media_aspect_ratio="3-2",
  hide_media_on_small_medium_breakpoints=false,
  is_media_highlighted=false
  ) -%}
  {%- 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 -%}
  {%- set has_image = img_attrs['src']|trim|length > 0 -%}
  {%- set lite_youtube_video_id = video_attrs['video_id']|trim -%}
  {%- set has_lite_youtube = lite_youtube_video_id|length > 0 -%}
  {%- set has_video = has_lite_youtube or video_attrs['src']|trim|length > 0 -%}
  {%- set has_media = has_image or has_video -%}

  {% if media_placement not in ["before_description", "after_description", "after_cta"] %}
    {% set media_placement = "after_cta" %}
  {% endif %}

  {% if media_aspect_ratio not in ["3-2", "16-9"] %}
    {% set media_aspect_ratio = "3-2" %}
  {% endif %}
  {% if is_media_full_width %}
    {% set media_aspect_ratio = "cinematic" %}
  {% endif %}

  {% macro _wrapped_media() %}
    {%- set section_classes = ("p-section--shallow" if (media_placement == "before_description") or (media_placement == "after_description" and not is_media_full_width)) -%}
    {%- set hide_classes = ("u-hide--medium u-hide--small" if hide_media_on_small_medium_breakpoints else "") -%}
    {%- if has_media -%}
      {%- if has_video -%}
        <div class="{{ section_classes }} {{ hide_classes }}">
          {#- u-embedded-media applies 16:9 aspect ratio via padding. -#}
          <div class="u-embedded-media u-no-margin--bottom"> 
            {%- if has_lite_youtube -%}
              {%- set lite_youtube_video_title = video_attrs['video_title']|trim -%}
              <lite-youtube class="u-embedded-media__element {{ video_attrs['class'] }}"
              videoid="{{ lite_youtube_video_id }}"
              videotitle="{{ lite_youtube_video_title }}"
              {% if 'posterquality' not in video_attrs %}posterquality="maxresdefault"{% endif %}
            {% for attr, value in video_attrs.items() %}
              {% if attr not in ["class", "video_id", "video_title"] %}
                {{- attr }}="{{ value }}"
              {% endif %}
            {% endfor %}
              >
                <a href="https://www.youtube.com/watch?v={{ lite_youtube_video_id }}" title="Play Video">
                  <span class="lyt-visually-hidden">{{ lite_youtube_video_title }}</span>
                </a>
              </lite-youtube>
            {%- else -%}
            <iframe class="u-embedded-media__element {{ video_attrs['class'] }}"
            {% for attr, value in video_attrs.items() %}
              {% if attr != "class" %}
                {{- attr }}="{{ value }}"
              {% endif %}
            {% endfor %}
            ></iframe>
            {%- endif -%}
          </div>
        </div>
      {%- elif has_image -%}
        <div class="{{ section_classes }} {{ hide_classes }}">
          <div class="p-image-container--{{ media_aspect_ratio }} is-cover{%- if is_media_highlighted %} is-highlighted{% endif -%}">
            <img
              {#- Forward classes from the img_attrs. This is optional, on a per-pattern basis. #}
              class="p-image-container__image {{ img_attrs['class'] }}"
            {% for attr, value in img_attrs.items() %}
              {% if attr != "class" %}
                {{- attr }}="{{ value }}"
              {% endif %}
            {% endfor %}
            >
          </div>
        </div>
      {%- endif -%}
    {%- endif -%}
  {% endmacro %}

  {% macro _full_width_media_row() %}
    {%- if has_media and is_media_full_width -%}
      <div class="grid-row">
        <div class="grid-col">
          {{- _wrapped_media() -}}
        </div>
      </div>
    {%- endif -%}
  {% endmacro %}

  {% macro _description_with_media() %}
    {#- Non-full-width media before description -#}
    {%- if has_media and media_placement == "before_description" and not is_media_full_width -%}
      {{- _wrapped_media() -}}
    {%- endif -%}
    {{ description_content }}
    {#- Non-full-width media after description (before CTA) -#}
    {%- if has_media and media_placement == "after_description" and not is_media_full_width -%}
      {{- _wrapped_media() -}}
    {%- endif -%}
  {% endmacro %}

  {#- Non-full-width "after_cta" media renders in its own row after the CTA. -#}
  {% macro _after_cta_media_row() %}
    {%- if has_media and media_placement == "after_cta" and not is_media_full_width -%}
      <div class="grid-row">
        <div class="grid-col-4 grid-col-start-large-5">
          {{- _wrapped_media() -}}
        </div>
      </div>
    {%- endif -%}
  {% endmacro %}

  {%- if title_content|trim|length == 0 -%}
    {%- set title_content = "<h2>Tiered List</h2>" -%}
  {%- endif -%}

  {%- if description_content|trim|length == 0 -%}
    {%- set description_content = "<p>This is a tiered list.</p>" -%}
  {%- endif -%}

  {%- if cta_content|trim|length == 0 -%}
    {%- set cta_content = "<p>No CTA provided.</p>" -%}
  {%- endif -%}

  <div class="{{ padding_classes }} u-fixed-width">
    {{ vf_section_top_rule(top_rule_variant) }}
    {% if has_media and is_media_full_width and media_placement == "before_description" %}
      {{- _full_width_media_row() -}}
    {% endif %}
    <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_with_media() -}}
            </div>
          </div>
        {%- else -%} {#- (50/50 desktop layout) -#}
          <div class="grid-row--50-50-on-large">
            <div class="grid-col">
              {{ title_content }}
            </div>

            <div class="grid-col">
              {{- _description_with_media() -}}
            </div>
          </div>
        {%- endif -%}
        {% if has_cta == true -%}
          <div class="grid-row">
            <div class="grid-col-4 grid-col-start-large-5">
              {{ cta_content }}
            </div>
          </div>
        {%- endif %}
        {{- _after_cta_media_row() -}}
      {%- else -%} {#- No description (has_description is false) -#}
        <div class="grid-row">
          {#- No description; the non-full-width media goes directly adjacent to the title -#}
          <div class="{% if not has_media or is_media_full_width %}grid-col{% else %}grid-col-4{% endif %}">
            <div class="p-section--shallow">
              {{ title_content }}
            </div>
          </div>
          {% if has_media and not is_media_full_width %}
            <div class="grid-col-4 grid-col-start-large-5">
              {{- _wrapped_media() -}}
            </div>
          {% endif %}
        </div>
      {%- endif %}

    {#- Always render full-width media in its own row, after the main title/description/no-description blocks -#}
    {% if has_media and is_media_full_width and media_placement != "before_description" %}
      {{- _full_width_media_row() -}}
    {% 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.
    -#}
      {%- 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 -%}
          {#- Skip the first HR -#}
          {%- if number != 1 %}
            <div class="grid-row">
              <div class="grid-col-6 grid-col-start-large-3">
                <hr class="p-rule--muted">
              </div>
            </div>
          {%- endif -%}

          {%- set medium_class = "" if is_list_full_width_on_tablet else "grid-col-medium-2" -%}
          <div class="grid-row">
            <div class="{{ medium_class }} grid-col-2 grid-col-start-large-3">{{ list_item_title_content }}</div>

            <div class="{{ medium_class }} grid-col-4">{{ list_item_description_content }}</div>
          </div>
        {%- endif -%}
      {% endfor %}
  </div>
{%- endmacro %}