{#
/**
 * @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 data object
 *
 * @see template_preprocess_drimage_formatter()
 *
 * @ingroup themeable
 */
#}

{{ attach_library('drimage/drimage') }}

{% set extra_classes = [] %}

{% if aspect %}
  {% set inline_style = inline_style ~ "padding-bottom: " ~ aspect ~ ";" %}
{% endif %}

<div {{ item_attributes.addClass(extra_classes|join('')) }} data-drimage="{{ data|json_encode }}"{% if aspect %} style="{{inline_style}}"{% endif %}>
  {% if url %}
    {% apply spaceless %}
    <a href="{{ url }}">
      <img src="data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'%20width='{{ width }}'%20height='{{ height }}'%20viewBox='0%200%20{{ width }}%20{{ height }}'%20%3E%3C/svg%3E" width="{{ width }}" height="{{ height }}" alt="{{ alt }}">
    </a>
    {% endapply %}
  {% else %}
    <img src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='{{ width }}'%20height='{{ height }}'%20viewBox='0%200%20{{ width }}%20{{ height }}'%20%3E%3C/svg%3E" width="{{ width }}" height="{{ height }}" alt="{{ alt }}">
  {% endif %}
</div>
<noscript>
  <img src="{{ data.original_source }}" alt="{{ alt }}" width="{{ data.original_width }}" height="{{ data.original_height }}">
</noscript>
