{#
/**
 * @file
 * Template for a Bootstrap 5 Image component.
 *
 * Available variables:
 * - media: Image object with src, alt, width, height properties.
 * - size: Aspect ratio key (16:9, 4:3, 1:1). Applies Bootstrap ratio classes.
 * - width_class: Bootstrap width utility class for the container.
 * - height_class: Bootstrap height utility class for the container.
 * - radius: Corner rounding size (rounded-0, small, large, extra-large).
 * - caption: Optional caption text rendered in a <figcaption>.
 * - url: Optional URL. If provided, wraps the image in an anchor tag.
 * - custom_class: Additional CSS classes for the <figure> wrapper.
 * - margin_*/padding_* props: Bootstrap spacing classes for the figure.
 *
 * @ingroup themeable
 */
#}

{# 1. Build the image container classes #}
{% set container_classes = [] %}
{% if width_class and width_class != 'none' %}
  {% set container_classes = container_classes|merge([width_class]) %}
{% endif %}
{% if height_class and height_class != 'none' %}
  {% set container_classes = container_classes|merge([height_class]) %}
{% endif %}

{# 2. Apply Bootstrap aspect ratio class #}
{% set size_classes = {
  '16:9': 'ratio ratio-16x9',
  '4:3': 'ratio ratio-4x3',
  '1:1': 'ratio ratio-1x1'
} %}
{% if size and size_classes[size] is defined %}
  {% set container_classes = container_classes|merge([size_classes[size]]) %}
{% endif %}

{# 3. Apply corner rounding — overflow-hidden prevents image bleeding #}
{% if radius is defined and radius is not empty and radius != 'rounded-0' %}
  {% set container_classes = container_classes|merge(['overflow-hidden']) %}
  {% set radius_classes = {
    'small': 'rounded-1',
    'large': 'rounded-3',
    'extra-large': 'rounded-4'
  } %}
  {% if radius_classes[radius] is defined %}
    {% set container_classes = container_classes|merge([radius_classes[radius]]) %}
  {% endif %}
{% endif %}

{# 4. Build figure spacing classes #}
{% set figure_classes = [
  margin_all,
  margin_top,
  margin_bottom,
  margin_start,
  margin_end,
  margin_x,
  margin_y,
  padding_all,
  padding_top,
  padding_bottom,
  padding_start,
  padding_end,
  padding_x,
  padding_y,
  margin_all_sm and margin_all_sm != 'none' ? margin_all_sm : '',
  margin_top_sm and margin_top_sm != 'none' ? margin_top_sm : '',
  margin_bottom_sm and margin_bottom_sm != 'none' ? margin_bottom_sm : '',
  margin_start_sm and margin_start_sm != 'none' ? margin_start_sm : '',
  margin_end_sm and margin_end_sm != 'none' ? margin_end_sm : '',
  margin_x_sm and margin_x_sm != 'none' ? margin_x_sm : '',
  margin_y_sm and margin_y_sm != 'none' ? margin_y_sm : '',
  padding_all_sm and padding_all_sm != 'none' ? padding_all_sm : '',
  padding_top_sm and padding_top_sm != 'none' ? padding_top_sm : '',
  padding_bottom_sm and padding_bottom_sm != 'none' ? padding_bottom_sm : '',
  padding_start_sm and padding_start_sm != 'none' ? padding_start_sm : '',
  padding_end_sm and padding_end_sm != 'none' ? padding_end_sm : '',
  padding_x_sm and padding_x_sm != 'none' ? padding_x_sm : '',
  padding_y_sm and padding_y_sm != 'none' ? padding_y_sm : '',
  margin_all_md and margin_all_md != 'none' ? margin_all_md : '',
  margin_top_md and margin_top_md != 'none' ? margin_top_md : '',
  margin_bottom_md and margin_bottom_md != 'none' ? margin_bottom_md : '',
  margin_start_md and margin_start_md != 'none' ? margin_start_md : '',
  margin_end_md and margin_end_md != 'none' ? margin_end_md : '',
  margin_x_md and margin_x_md != 'none' ? margin_x_md : '',
  margin_y_md and margin_y_md != 'none' ? margin_y_md : '',
  padding_all_md and padding_all_md != 'none' ? padding_all_md : '',
  padding_top_md and padding_top_md != 'none' ? padding_top_md : '',
  padding_bottom_md and padding_bottom_md != 'none' ? padding_bottom_md : '',
  padding_start_md and padding_start_md != 'none' ? padding_start_md : '',
  padding_end_md and padding_end_md != 'none' ? padding_end_md : '',
  padding_x_md and padding_x_md != 'none' ? padding_x_md : '',
  padding_y_md and padding_y_md != 'none' ? padding_y_md : '',
  margin_all_lg and margin_all_lg != 'none' ? margin_all_lg : '',
  margin_top_lg and margin_top_lg != 'none' ? margin_top_lg : '',
  margin_bottom_lg and margin_bottom_lg != 'none' ? margin_bottom_lg : '',
  margin_start_lg and margin_start_lg != 'none' ? margin_start_lg : '',
  margin_end_lg and margin_end_lg != 'none' ? margin_end_lg : '',
  margin_x_lg and margin_x_lg != 'none' ? margin_x_lg : '',
  margin_y_lg and margin_y_lg != 'none' ? margin_y_lg : '',
  padding_all_lg and padding_all_lg != 'none' ? padding_all_lg : '',
  padding_top_lg and padding_top_lg != 'none' ? padding_top_lg : '',
  padding_bottom_lg and padding_bottom_lg != 'none' ? padding_bottom_lg : '',
  padding_start_lg and padding_start_lg != 'none' ? padding_start_lg : '',
  padding_end_lg and padding_end_lg != 'none' ? padding_end_lg : '',
  padding_x_lg and padding_x_lg != 'none' ? padding_x_lg : '',
  padding_y_lg and padding_y_lg != 'none' ? padding_y_lg : '',
  margin_all_xl and margin_all_xl != 'none' ? margin_all_xl : '',
  margin_top_xl and margin_top_xl != 'none' ? margin_top_xl : '',
  margin_bottom_xl and margin_bottom_xl != 'none' ? margin_bottom_xl : '',
  margin_start_xl and margin_start_xl != 'none' ? margin_start_xl : '',
  margin_end_xl and margin_end_xl != 'none' ? margin_end_xl : '',
  margin_x_xl and margin_x_xl != 'none' ? margin_x_xl : '',
  margin_y_xl and margin_y_xl != 'none' ? margin_y_xl : '',
  padding_all_xl and padding_all_xl != 'none' ? padding_all_xl : '',
  padding_top_xl and padding_top_xl != 'none' ? padding_top_xl : '',
  padding_bottom_xl and padding_bottom_xl != 'none' ? padding_bottom_xl : '',
  padding_start_xl and padding_start_xl != 'none' ? padding_start_xl : '',
  padding_end_xl and padding_end_xl != 'none' ? padding_end_xl : '',
  padding_x_xl and padding_x_xl != 'none' ? padding_x_xl : '',
  padding_y_xl and padding_y_xl != 'none' ? padding_y_xl : '',
  margin_all_xxl and margin_all_xxl != 'none' ? margin_all_xxl : '',
  margin_top_xxl and margin_top_xxl != 'none' ? margin_top_xxl : '',
  margin_bottom_xxl and margin_bottom_xxl != 'none' ? margin_bottom_xxl : '',
  margin_start_xxl and margin_start_xxl != 'none' ? margin_start_xxl : '',
  margin_end_xxl and margin_end_xxl != 'none' ? margin_end_xxl : '',
  margin_x_xxl and margin_x_xxl != 'none' ? margin_x_xxl : '',
  margin_y_xxl and margin_y_xxl != 'none' ? margin_y_xxl : '',
  padding_all_xxl and padding_all_xxl != 'none' ? padding_all_xxl : '',
  padding_top_xxl and padding_top_xxl != 'none' ? padding_top_xxl : '',
  padding_bottom_xxl and padding_bottom_xxl != 'none' ? padding_bottom_xxl : '',
  padding_start_xxl and padding_start_xxl != 'none' ? padding_start_xxl : '',
  padding_end_xxl and padding_end_xxl != 'none' ? padding_end_xxl : '',
  padding_x_xxl and padding_x_xxl != 'none' ? padding_x_xxl : '',
  padding_y_xxl and padding_y_xxl != 'none' ? padding_y_xxl : '',
  custom_class|default(''),
]|filter(v => v) %}

{# 5. Render the figure #}
<figure class="{{ figure_classes|join(' ') }}">
  <div class="{{ container_classes|join(' ') }}">
    {% if url %}
      <a href="{{ url }}" class="d-block">
        {% include 'canvas:image' ignore missing with {
          src: media.src,
          alt: media.alt,
          class: 'img-fluid w-100 h-100 object-fit-cover',
          width: media.width,
          height: media.height
        } only %}
      </a>
    {% else %}
      {% include 'canvas:image' ignore missing with {
        src: media.src,
        alt: media.alt,
        class: 'img-fluid w-100 h-100 object-fit-cover',
        width: media.width,
        height: media.height
      } only %}
    {% endif %}
  </div>

  {% if caption %}
    <figcaption class="mt-2 text-muted small">
      {{ caption }}
    </figcaption>
  {% endif %}
</figure>
