{% from "_macros/shared/vf_cta-block.jinja" import vf_cta_block %}
{% from "_macros/vf_basic-section.jinja" import vf_basic_section_blocks %}

# Params
# title_text: Hero title text (required)
# subtitle_text: Hero subtitle text
# layout: layout of hero section. Options are '50/50', '50/50-full-width-image', '75/25', '25/75', 'fallback'
# is_split_on_medium: whether the layout is split on tablet in 50/50, 25/75, and 75/25 layouts.
#   If false, the layout is stacked on tablet.
#   If true, the layout is split on tablet.
# display_blank_signpost_image_space: whether to indent the content for 25/75 layout on large screens.
# blocks: list of content blocks for the hero section. Includes description, cta, image, and signpost_image blocks.
# Slots
# description (deprecated): paragraph-style content below the title and subtitle
# cta (deprecated): call-to-action block below the description
# image (deprecated): slot for image content
# signpost_image (deprecated): slot for signpost (left column) image content in 25/75 layout. Required for 25/75 layout.
{% macro vf_hero(
  title_text,
  subtitle_text='',
  layout="fallback",
  is_split_on_medium=false,
  display_blank_signpost_image_space=false,
  blocks=[]
) -%}
  {%- set description_blocks = blocks | selectattr("type", "equalto", "description") | list -%}
  {%- set cta_block = blocks | selectattr("type", "equalto", "cta-block") | list | first | default(None) -%}
  {%- set image_block = blocks | selectattr("type", "equalto", "image") | list | first | default(None) -%}
  {%- set signpost_image_block = blocks | selectattr("type", "equalto", "signpost_image") | list | first | default(None) -%}

  {% set has_subtitle = subtitle_text|trim|length > 0 %}
  {% set description_content = caller('description') %}
  {% set has_description = description_blocks | length > 0 or description_content|trim|length > 0 %}
  {% set cta_content = caller('cta') %}
  {% set has_cta = cta_block or cta_content|trim|length > 0 %}
  {% set image_content = caller('image') %}
  {% set has_image = image_block or image_content|trim|length > 0 %}
  {% set signpost_image_content = caller('signpost_image') %}
  {% set has_signpost_image = signpost_image_block or signpost_image_content|trim|length > 0 or display_blank_signpost_image_space %}

  {#- User can pass layout as "X-Y" or "X/Y" -#}
  {% set layout = layout | trim | replace('/', '-') %}
  {% if layout not in ['50-50', '50-50-full-width-image', '75-25', '25-75', 'fallback'] %}
    {% set layout = 'fallback' %}
  {% endif %}

  {% set is_50_50_no_image = (layout == "50-50" and not has_image) %}

  {% if layout == '50-50-full-width-image' and has_image %}
    {% set layout = '50-50' %}
    {% set has_full_width_image = true %}
  {% endif %}

  {% if layout == '25-75' %}
    {% if has_signpost_image %}
      {% if has_image %}
        {#- Signpost layouts with images are always full-width -#}
        {% set has_full_width_image = true %}
      {% endif %}
    {% else %}
      {#- 25-75 signpost must include a signpost image. -#}
      {% set layout = 'fallback' %}
    {% endif %}
  {% endif %}

  {% if layout == 'fallback' %}
    {#- Fallback partially uses 50-50 layout, so set a fallback flag and set layout to 50-50 -#}
    {% set is_fallback = true %}
    {% set layout = '50-50' %}

    {#- Restrict layout choices to make sure fallback looks consistent -#}
    {% set has_full_width_image = false %}
    {% set is_split_on_medium = false %}
  {% endif %}

  {#- Construct grid classes from params input -#}
  {% set row_classes = [] %}
  {% set col_classes = ['col', 'col'] %}
  {% if layout in ['50-50', '25-75', '75-25'] %}
    {#- Responsive breakpoint classes were requested -#}
    {% if not is_split_on_medium %}
      {{ row_classes.append('row--' + layout + '-on-large') or "" }}
    {% else %}
      {{ row_classes.append('row--' + layout) or "" }}
    {% endif %}
  {% endif %}

  {%- macro _hero_title_block() -%}
    {%- if has_full_width_image or is_50_50_no_image -%}
      {%- if has_subtitle -%}
      {#- On full-width-image and 50/50 with no image, the h1 and h2 are in separate columns, so there must be no margin-bottom to keep h1 close to h2 on smaller screens  -#}
        {% set title_class = "u-no-margin--bottom" %}
      {%- endif -%}
    {%- endif -%}

    {#- Only add a class attribute if needed -#}
    <h1{% if title_class|trim|length > 0 %} class="{{ title_class }}"{% endif %}>
      {{ title_text }}
    </h1>
  {%- endmacro %}

  {%- macro _hero_subtitle_block() -%}
    {% if has_subtitle %}
      <p class="p-heading--2">
        {{ subtitle_text }}
      </p>
    {% endif %}
  {%- endmacro %}

  {%- macro _hero_cta_block() -%}
    {%- if cta_block -%}
      {{- vf_basic_section_blocks(items=[cta_block], override_last_item_padding=true) -}}
    {% elif has_cta -%}
      <div class="p-cta-block">
        {{ cta_content }}
      </div>
    {% endif %}
  {%- endmacro %}

  {%- macro _hero_description_block() -%}
    {%- if description_blocks | length > 0 -%}
      {% for description_block in description_blocks %}
        {{ vf_basic_section_blocks(items=[description_block], override_last_item_padding=true) }}
      {% endfor %}
    {% elif has_description %}
      <div class="p-section--shallow">
        {{ description_content }}
      </div>
    {% endif %}
  {%- endmacro %}

  {%- macro _hero_image_block() -%}
    {%- if image_block -%}
      {{- vf_basic_section_blocks(items=[image_block], override_last_item_padding=true) -}}
    {% elif has_image -%}
      {{ image_content }}
    {% endif %}
  {%- endmacro %}

  {%- macro _hero_signpost_image_block() -%}
    <div class="p-section--shallow">
      {%- if signpost_image_block -%}
        {% set _ = signpost_image_block.update(type="image") %}
        {% set _ = signpost_image_block.item.attrs.update({"class": "u-no-margin"}) %}
        {{- vf_basic_section_blocks(items=[signpost_image_block], override_last_item_padding=true) -}}
      {% else -%}
        {{ signpost_image_content }}
      {% endif %}
    </div>
  {%- endmacro %}

  <section class="p-section--hero">
    {% if is_fallback -%}
      <div class="row">
        <div class="col">
          <div class="p-section--shallow">
            {{ _hero_title_block() -}}
            {{ _hero_subtitle_block() -}}
          </div>
        </div>
      </div>
    {% endif -%}
    <div class="{{ row_classes | join(' ') }}">
      {%- if is_fallback -%}
        <div class="{{ col_classes[0] }}">
          {{- _hero_description_block() -}}
          {{ _hero_cta_block() -}}
        </div>
        {% if has_image -%}
          <div class="{{ col_classes[1] }}">
            {{ _hero_image_block() }}
          </div>
        {% endif -%}
      {% elif (has_full_width_image and not has_signpost_image) or is_50_50_no_image %}
        <div class="{{ col_classes[0] }}">
          {{ _hero_title_block() }}
        </div>
        <div class="{{ col_classes[1] }}">
          {% if has_subtitle %}
            <div class="p-section--shallow">
              {{- _hero_subtitle_block() -}}
            </div>
          {% endif %}
          {{- _hero_description_block() -}}
          {{- _hero_cta_block() -}}
        </div>
        {{ _hero_image_block() }}
      {% elif has_signpost_image and layout == '25-75' %}
        {#- 25/75 Signpost layout -#}
        <div class="{{ col_classes[0] }}">
          {{ _hero_signpost_image_block() -}}
        </div>
        <div class="{{ col_classes[1] }}">
          <div class="p-section--shallow">
            {{ _hero_title_block() -}}
            {{ _hero_subtitle_block() -}}
          </div>
          {{- _hero_description_block() -}}
          {{- _hero_cta_block() -}}
        </div>
        {% if has_image %}
          {#- Signpost with image is always full-width, so set it after the columns -#}
          {{- _hero_image_block() }}
        {% endif -%}
      {% else %}
        <div class="{{ col_classes[0] }}">
          <div class="p-section--shallow">
            {{ _hero_title_block() -}}
            {{ _hero_subtitle_block() -}}
          </div>
          {{- _hero_description_block() -}}
          {{- _hero_cta_block() -}}
        </div>
        {% if has_image -%}
          <div class="{{ col_classes[1] }}">
            {{ _hero_image_block() }}
          </div>
        {% endif -%}
      {% endif -%}
    </div>
  </section>
{%- endmacro %}