{# LIBRARIES #}
{{ attach_library('ui_patterns/image.image_lib') }}

{# VARIABLES #}
{% set img_class = img_class|default("") %}
{% set fig_class = fig_class|default("") %}
{% set bg_size = bg_size|default("") %}
{% set type = type|default('fg') %}
{% set url = url|default(false) %}
{% set alt = alt|default(false) %}

{% set img_attributes = img_attributes|default(create_attribute()) %}
{% if url %}
  {% set img_attributes = img_attributes.setAttribute("src", file_url(url)) %}
{% endif %}
{% if alt == '<none>' or not alt %}
  {% set img_attributes = img_attributes.setAttribute("role", 'presentation') %}
  {% set img_attributes = img_attributes.setAttribute("alt", "") %}
{% else %}
  {% set img_attributes = img_attributes.setAttribute("alt", alt) %}
{% endif %}

{# TEMPLATES #}
{% if type == 'fg' %}
  {%- set image -%}
    {% if url is not empty %}
      <img {{ img_attributes.addClass(img_class) }} />
    {% else %}
      {{- image -}}
    {%- endif -%}
  {% endset %}
  {% include '@atoms/html5/image/_image--image.twig' with {
    image: image,
    caption: caption,
    fig_class: fig_class,
  } only %}
{% elseif type == 'bg' %}
  {% include '@atoms/html5/image/_image--background.twig' with {
    url: url,
    background_class: background_class,
    caption: caption,
    bg_size: bg_size,
  } only %}
{% endif %}
