{#
/**
 * @file
 * Default theme implementation to display a dynamic responsive image
 *
 * Available variables:
 * - url: An optional URL the image can be linked to.
 * - width: The original width of the image.
 * - height: The original height of the image.
 * - alt: The alt text for the image.
 * - item_attributes: attributes for the wrapper
 * - data: json encoded drimage_improved data object
 *
 * @see template_preprocess_drimage_improved_formatter()
 *
 * @ingroup themeable
 */
#}
{{ attach_library('drimage_improved/drimage_improved') }}

{% if placeholder_image_switch %}
  {% set dummy_image = placeholder_image %}
{% else %}
  {% set dummy_image = "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='" ~ width ~ "' height='" ~ height ~ "' viewBox='0 0 " ~ width ~ " " ~ height ~ "'%3E%3Crect width='100%25' height='100%25' fill='%23" ~ placeholder_color|slice(1) ~ "' /%3E%3C/svg%3E" %}
{% endif %}

<div {{ item_attributes }} data-drimage_improved="{{ data|json_encode }}">
  {# Prevent spaces in the link by glueing a and picture element together. #}
  {% if url %}
  <a href="{{ url }}"><picture>
  {% else %}
  <picture>
  {% endif %}

  {% if core_webp or imageapi_optimize_webp %}
    <source data-format="webp" srcset="{{ dummy_image }}" type="image/webp">
  {% endif %}
    <img src="{{ dummy_image }}" width="{{ width }}" height="{{ height }}" alt="{{ alt }}"{% if title %}title="{{ title }}"{% endif %} class="drimage-image" />

  {% if url %}
  </picture></a>
  {% else %}
  </picture>
  {% endif %}

  <noscript>
    <img src="/{{ data.subdir }}/{{ data.original_source }}" alt="{{ alt }}"{% if title %} title="{{ title }}"{% endif %} width="{{ data.original_width }}" height="{{ data.original_height }}" loading="lazy">
  </noscript>
</div>