{#
/**
 * @file
 * Figure component.
 *
 * @param string $src
 * @param string $srcset
 * @param string $sizes
 * @param number $width
 * @param number $height
 * @param string $alt
 * @param string $caption
 * @param boolean $lazy
 * @param boolean $lazy_fallback
 *   Define if a fallback image should be added for SEO purpose.
 * @param 'cover'|'contain'|'fill'|'none' $fit
 *   Define how the image will fit.
 * @param boolean $absolute
 *   Use absolute position on the image holder instead of relative.
 * @param boolean $inline
 *   Wether to enable the display of the figure inline or not. When `inline`, the root element
 *   will have a max-width set corresponding to the `width` given. Use with caution.
 * @param string $placeholder
 *   Use a custom placeholder.
 * @param string $placeholder_color
 *   Set an hexadecimal custom color for the generic placeholder.
 * @param array $attr
 *   Custom attributes for the root element.
 * @param array $inner_attr
 *   Custom attributes for the inner element.
 * @param array $img_attr
 *   Custom attributes for the image element.
 * @param array $caption_attr
 *   Custom attributes for the caption element.
 *
 * @block $caption
 *   Use this block to customize the image's caption.
 *
 * @todo
 *  - twicpics: use TwicPics to serve image at the right size
 *  - loading: display a loader while loading, the fallback image if there was an error
 *  - mode: img | background → is it really necessary with `object-fit-...`?
 */
#}

{% set absolute = absolute|default(false) %}
{% set inline = inline|default(false) %}
{% set fit = fit ?? null %}
{% set height = height|default(100) %}
{% set width = width|default(100) %}
{% set lazy = lazy ?? true %}

{% set placeholder_color = placeholder_color|default('#eee') %}
{%- set placeholder_markup -%}
  <svg xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 {{ width }} {{ height }}"
    width="{{ width }}"
    height="{{ height }}">
    <rect x="0" y="0" width="{{ width }}" height="{{ height }}" fill="{{ placeholder_color }}" />
  </svg>
{%- endset -%}
{% set generic_placeholder = 'data:image/svg+xml,%s'|format(placeholder_markup|url_encode) %}

{% set attributes =
  merge_html_attributes(
    attr ?? null,
    { data_component: 'Figure', class: ['figure', 'w-full'] },
    {
      style: { height: absolute ? '100%' : '', maxWidth: inline ? width ~ 'px' : '' },
      data_option_lazy: lazy
    }
  )
%}

{% set img_attributes =
  merge_html_attributes(
    img_attr ?? null,
    { class: 'figure__img' },
    {
      class: [
        'absolute inset-0 w-full max-w-none h-full',
        {
          'object-cover': fit == 'cover',
          'object-contain': fit == 'contain',
          'object-fill': fit == 'fill',
          'object-none': fit == 'none'
        }
      ],
      src: lazy ? placeholder|default(generic_placeholder) : src,
      data_src: lazy ? src|default(generic_placeholder) : src,
      alt: alt|default(''),
      width: width|default(false),
      height: height|default(false),
      srcset: srcset|default(false),
      sizes: sizes|default(false),
      data_ref: 'img'
    }
  )
%}

{% set inner_attributes =
  merge_html_attributes(
    inner_attr ?? null,
    { class: ['figure__inner'] },
    {
      class: absolute ? ['absolute', 'inset-0'] : ['relative', 'w-full', 'h-0'],
      style: { paddingTop: absolute ? '' : height * 100 / width ~ '%' }
    }
  )
%}

{% set caption_attributes =
  merge_html_attributes(caption_attr ?? null, { class: 'figure__caption' })
%}

<figure {{ html_attributes(attributes) }}>
  <div {{ html_attributes(inner_attributes) }}>
    <img {{ html_attributes(img_attributes) }} />
    {% if lazy and (lazy_fallback ?? false) %}
      {% set img_noscript_attributes = img_attributes|twig_toolkit_without('data_src', 'data_ref')|merge({
        src: img_attributes.data_src,
      }) %}
      <noscript>
        <img {{ html_attributes(img_noscript_attributes) }}>
      </noscript>
    {% endif %}
  </div>
  {% if caption is defined %}
    {% block caption %}
      <figcaption {{ html_attributes(caption_attributes) }}>
        {{ caption }}
      </figcaption>
    {% endblock %}
  {% endif %}
</figure>