{# Django template for Image #}
{% load components %}
{% if srcSet %}{% asset_srcset srcSet staticBaseUrl as imageSrcSet %}{% endif %}
{# Props: src, alt, href, rounded, circular, objectFit, maxWidth, maxHeight, caption, hideCaption, className #}
{# For responsive images, src may be an object: { fallback, sources: [{ srcSet, media?, type?, sizes? }] } #}

{% comment %} Build shared values {% endcomment %}
{% with classes="usx-image"|add:" usx-image--rounded"|yesno:","|slice:"0" %}
{% endwith %}

{% comment %} Inline image element (string src or picture) {% endcomment %}
{% with img_style=""|add:"" %}
{% endwith %}

{% if caption %}
<figure class="usx-image{% if rounded %} usx-image--rounded{% endif %}{% if circular %} usx-image--circular{% endif %}{% if objectFit %} usx-object-fit-{{ objectFit }}{% endif %}{% if className %} {{ className }}{% endif %}"
  {% if maxWidth or maxHeight %} style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %}>
  {% if src.fallback %}
    <picture>
      {% for source in src.sources %}
        <source srcset="{% asset_srcset source.srcSet staticBaseUrl %}"
          {% if source.media %}media="{{ source.media }}"{% endif %}
          {% if source.type %}type="{{ source.type }}"{% endif %}
          {% if source.sizes %}sizes="{{ source.sizes }}"{% endif %}
        />
      {% endfor %}
      <img src="{% asset_url src.fallback staticBaseUrl %}"{% if imageSrcSet %} srcset="{{ imageSrcSet }}"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}
        {% if maxWidth or maxHeight %}style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %} />
    </picture>
  {% elif src %}
    <img src="{% asset_url src staticBaseUrl %}"{% if imageSrcSet %} srcset="{{ imageSrcSet }}"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}
      {% if maxWidth or maxHeight %}style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %} />
  {% else %}
    Image
  {% endif %}
  <figcaption class="usx-image--caption{% if hideCaption %} usa-sr-only{% endif %}" aria-hidden="{{ hideCaption|yesno:'true,false' }}">{{ caption }}</figcaption>
</figure>
{% else %}
  {% if href %}<a href="{{ href }}"
  {% else %}<div
  {% endif %}
    class="usx-image{% if rounded %} usx-image--rounded{% endif %}{% if circular %} usx-image--circular{% endif %}{% if objectFit %} usx-object-fit-{{ objectFit }}{% endif %}{% if className %} {{ className }}{% endif %}"
    {% if maxWidth or maxHeight %}style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %}
  >
    {% if src.fallback %}
      <picture>
        {% for source in src.sources %}
          <source srcset="{% asset_srcset source.srcSet staticBaseUrl %}"
            {% if source.media %}media="{{ source.media }}"{% endif %}
            {% if source.type %}type="{{ source.type }}"{% endif %}
            {% if source.sizes %}sizes="{{ source.sizes }}"{% endif %}
          />
        {% endfor %}
        <img src="{% asset_url src.fallback staticBaseUrl %}"{% if imageSrcSet %} srcset="{{ imageSrcSet }}"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}
          {% if maxWidth or maxHeight %}style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %} />
      </picture>
    {% elif src %}
      <img src="{% asset_url src staticBaseUrl %}"{% if imageSrcSet %} srcset="{{ imageSrcSet }}"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}
        {% if maxWidth or maxHeight %}style="{% if maxWidth %}max-width: {{ maxWidth }};{% if not maxHeight %} height: auto;{% endif %}{% endif %}{% if maxHeight %} max-height: {{ maxHeight }};{% if not maxWidth %} width: auto;{% endif %}{% endif %}"{% endif %} />
    {% else %}
      Image
    {% endif %}
  {% if href %}</a>{% else %}</div>{% endif %}
{% endif %}