{% from "_macros/shared/vf_section_top_rule.jinja" import vf_section_top_rule %}
{%- from "_macros/shared/vf_blog-block.jinja" import vf_blog_block %}

# Params
# - article_config: A dictionary with the article configuration.
#   - "title": A dictionary with "text" and optional "link" (a dictionary of link attributes for the title).
#   - "image": A dictionary with "attrs" dict containing "src", "alt", and other image attributes.
#          The image is automatically wrapped in a 16:9 cover image container and passed to
#          vf_article_block as before_title_html. A fallback image is used if no image
#          is provided (can be overridden via fallback_image_url).
#   - "description": A dictionary with "text" containing the article description.
#   - "metadata": A dictionary with:
#     - "authors": A list of author objects, each with "text" and optional "link" (a dictionary of link attributes)
#     - "date": A dictionary with "text" and optional "attrs" (a dictionary of time element attributes)
# - template_mode: Boolean indicating if the macro is being used in template mode (for dynamic loading scenarios).
# - fallback_image_url: URL to use as a fallback image, if no image is provided for an article.
{# moved article rendering and template/container logic into shared vf_blog-block.jinja
   which exposes `vf_blog_block` for rendering the articles area. #}

# Params
# title: A dictionary with "text" and optional "link_attrs" (a dictionary of link attributes for the title).
# articles: A list of article dictionaries, each with "title", "image", "description", and "metadata".
# template_config:
#   - enabled: A boolean to enable or disable the template mode.
#   - template_container_id: A string for the id of the container to use for dynamic loading scenarios.
#   - template_id: A string for the id of the template to use for dynamic loading scenarios.
#   - layout: Layout to apply to the template. Options are "3-blocks" and "4-blocks".
# padding: Type of padding to apply to the pattern - "deep", "shallow", "default" (default is "default").
# top_rule_variant: Type of HR to render at the top of the pattern. "default" | "muted" (default is "default").
# fallback_image_url: URL to use as a fallback image, if no image is provided for an article.
{% macro vf_blog(
    title={},
    articles=[],
    template_config={},
    padding="default",
    top_rule_variant="default",
    fallback_image_url="https://assets.ubuntu.com/v1/94c82a15-blog_fallback_image.png"
) -%}
  {%- set padding = padding | trim -%}
  {%- 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 -%}

  {#- Infer layout from article count -#}
  {%- if articles | length == 3 -%}
    {%- set layout = "3-blocks" -%}
  {%- elif articles | length == 4 -%}
    {%- set layout = "4-blocks" -%}
  {%- endif -%}

  {%- set template_mode = template_config.get("enabled", False) -%}

  {#- In template mode, read layout from the template config, instead of inferring it from the article count. -#}
  {%- if template_mode -%}
    {%- set layout = template_config.get("layout", "4-blocks") -%}
  {%- endif -%}

  {#- Default to "4-blocks" layout if an unrecognized layout is used. -#}
  {%- if layout not in ["3-blocks", "4-blocks"] -%}
    {%- set layout = "4-blocks" -%}
  {%- endif -%}

  <section class="{{ padding_classes }}">
    <div class="p-blog grid-row">
      {{- vf_section_top_rule(top_rule_variant) -}}
      <div class="grid-col-{%- if layout == "3-blocks" -%}2{%- else -%}8{%- endif -%}">
        <h2 class="p-muted-heading">
          {%- if title.get("link_attrs") -%}
            <a
              {% for attr, value in title.get("link_attrs", {}).items() %}
                {{ attr }}="{{ value }}"
              {% endfor %}
            >
          {%- endif -%}
          {{- title.get("text", "Blog Title") -}}
          {%- if title.get("link_attrs") -%}
            </a>
          {%- endif -%}
        </h2>
      </div>
      {{ vf_blog_block(articles=articles, template_config=template_config, fallback_image_url=fallback_image_url) }}
    </div>
  </section>
{%- endmacro -%}