{% from "_macros/vf_basic-section.jinja" import basic_section_title, vf_basic_section_blocks %}
{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}

# Params
# title (dict) (required): {text, link_attrs?} — rendered via basic_section_title (always renders <h2>).
# items (array) (optional): Array of {type, item} dicts rendered via vf_basic_section_blocks.
#   Supported types: description, list, code-block, logo-block, cta-block.
#   Entries with any other type are silently dropped.
# media (dict) (required): Media column config. Keys:
#   - type (string): "image" | "video". Defaults to "image".
#   - ratio.large (string): "16-9" | "3-2" | "1-1" | "2-3" | "auto-height". Defaults to "3-2".
#   - ratio.medium_small (string): "16-9" | "3-2" | "1-1". Defaults to "3-2".
#   - fit (string): "cover" | "contain". Defaults to "cover".
#   - attrs (dict): Passthrough HTML attributes for the <img> or <iframe>.
# is_flipped (bool) (optional): Swap content and media columns. Defaults to false.
# padding (string) (optional): "deep" | "shallow" | "default". Defaults to "default".
# top_rule_variant (string) (optional): "default" | "muted". Defaults to "default".
# attrs (dict) (optional): HTML attrs for the <section>.
{% macro vf_rich_vertical_list(
  title={},
  items=[],
  media={},
  is_flipped=false,
  padding="default",
  top_rule_variant="default",
  attrs={}
) -%}
  {#- Normalise & validate padding -#}
  {%- set padding = padding | string | trim | lower -%}
  {%- if padding not in ['deep', 'shallow', 'default'] -%}{%- set padding = 'default' -%}{%- endif -%}
  {%- set padding_classes = 'p-section--' ~ padding -%}
  {%- if padding == 'default' -%}{%- set padding_classes = 'p-section' -%}{%- endif -%}

  {#- Normalise & validate top_rule_variant -#}
  {%- set top_rule_variant = top_rule_variant | string | trim | lower -%}
  {%- if top_rule_variant not in ['default', 'muted'] -%}{%- set top_rule_variant = 'default' -%}{%- endif -%}

  {#- Normalise & validate media config -#}
  {%- set media_type = (media.get('type', 'image') | string | trim | lower) -%}
  {%- if media_type not in ['image', 'video'] -%}{%- set media_type = 'image' -%}{%- endif -%}

  {%- set media_ratio = media.get('ratio', {}) -%}
  {%- set media_ratio_large = (media_ratio.get('large', '3-2') | string | trim | lower) -%}
  {%- set valid_large_ratios = ['16-9', '3-2', '1-1', '2-3', 'auto-height'] -%}
  {%- if media_ratio_large not in valid_large_ratios -%}{%- set media_ratio_large = '3-2' -%}{%- endif -%}

  {%- set media_ratio_medium_small = (media_ratio.get('medium_small', '3-2') | string | trim | lower) -%}
  {#- 'auto-height' is intentionally excluded — it requires side-by-side columns, but medium/small layouts stack -#}
  {%- set valid_medium_small_ratios = ['16-9', '3-2', '1-1'] -%}
  {%- if media_ratio_medium_small not in valid_medium_small_ratios -%}{%- set media_ratio_medium_small = '3-2' -%}{%- endif -%}

  {%- set media_fit = (media.get('fit', 'cover') | string | trim | lower) -%}
  {%- if media_fit not in ['cover', 'contain'] -%}{%- set media_fit = 'cover' -%}{%- endif -%}

  {%- set media_attrs = media.get('attrs', {}) -%}
  {%- set is_auto_height = (media_ratio_large == 'auto-height') -%}

  {#- Constrain items to the curated allow-list. Disallowed types are silently dropped. -#}
  {%- set allowed_item_types = ['description', 'list', 'code-block', 'logo-block', 'cta-block'] -%}
  {%- set filtered_items = items | selectattr('type', 'in', allowed_item_types) | list -%}

  {%- macro _rich_list_image(ratio_large, ratio_medium_small, fit, attrs) %}
    {%- set is_cover = (fit == 'cover') -%}
    {#- The image-container CSS uses 'square' for the 1:1 ratio class, not '1-1'. -#}
    {%- set ratio_large_class = 'square' if ratio_large == '1-1' else ratio_large -%}
    {%- set ratio_medium_small_class = 'square' if ratio_medium_small == '1-1' else ratio_medium_small -%}
    {%- set classes = 'p-image-container--' ~ ratio_large_class ~ '-on-large' -%}
    {%- set classes = classes ~ ' p-image-container--' ~ ratio_medium_small_class ~ '-on-medium' -%}
    {%- set classes = classes ~ ' p-image-container--' ~ ratio_medium_small_class ~ '-on-small' -%}
    {%- if is_cover -%}{%- set classes = classes ~ ' is-cover' -%}{%- endif -%}
    <div class="{{ classes }}">
      <img class="p-image-container__image{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif %}"
        {%- for attr, value in attrs.items() -%}
          {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
        {%- endfor -%}
      />
    </div>
  {%- endmacro -%}

  {%- macro _rich_list_video(attrs) %}
    <div class="u-embedded-media">
      <iframe class="u-embedded-media__element{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif %}"
        {%- for attr, value in attrs.items() -%}
          {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
        {%- endfor -%}
      ></iframe>
    </div>
  {%- endmacro -%}

  {%- macro _media_column_contents(
    media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height
  ) -%}
    {%- if is_auto_height -%}
      <div>
    {%- else -%}
      <div class="p-section--shallow">
    {%- endif -%}
      {%- if media_type == 'video' -%}
        {{ _rich_list_video(media_attrs) }}
      {%- else -%}
        {{ _rich_list_image(media_ratio_large, media_ratio_medium_small, media_fit, media_attrs) }}
      {%- endif -%}
    </div>
  {%- endmacro -%}

  {%- macro _content_column_contents(title, items) -%}
    {{ basic_section_title(title) }}
    {{ vf_basic_section_blocks(items=items) }}
  {%- endmacro -%}

<section class="{{ padding_classes }}{%- if 'class' in attrs %} {{ attrs['class'] }}{%- endif -%}"
  {%- for attr, value in attrs.items() -%}
    {%- if attr != 'class' %} {{ attr }}="{{ value }}"{%- endif -%}
  {%- endfor -%}
>
  <div class="grid-row--50-50-on-large">
    {{ vf_section_top_rule(top_rule_variant) }}
    {%- if not is_flipped -%}
      <div class="grid-col">{{ _content_column_contents(title, filtered_items) }}</div>
      <div class="grid-col">{{ _media_column_contents(media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height) }}</div>
    {%- else -%}
      <div class="grid-col">{{ _media_column_contents(media_type, media_ratio_large, media_ratio_medium_small, media_fit, media_attrs, is_auto_height) }}</div>
      <div class="grid-col">{{ _content_column_contents(title, filtered_items) }}</div>
    {%- endif -%}
  </div>
</section>
{%- endmacro %}