{#
/**
 * @file
 * Default theme implementation to display a formatted blazy image/media field.
 *
 * The Blazy supports core image, responsive image and media entity.
 * If iframe switcher is enabled, audio/video iframe will be hidden below image
 * overlay, and only visible when toggled. Otherwise iframe only, and image is
 * emptied.
 *
 * Available variables:
 *   - captions: An optional renderable array of inline or lightbox captions.
 *   - image: A collection of image data.
 *   - attributes: An array of attributes applied to .media container.
 *   - iframe: A renderable array of iframe with its attributes and SRC.
 *   - settings: An array containing the given settings.
 *   - url: An optional URL the image can be linked to, can be any of
 *       audio/video, or entity URLs, when using Colorbox/Photobox, or Link to
 *       content options.
 *   - url_attributes: An array of URL attributes, lightbox or content links.
 *   - noscript: The fallback image for non-js users.
 *   - postscript: Any extra content to put into blazy goes here. Use keyed or
 *       indexed array to not conflict with or nullify other providers, e.g.:
 *       postscript.cta, or postscript.widget. Avoid postscript = cta.
 *   - content: Various Media entities like Facebook, Instagram, local Video,
 *       etc. Basically content is the replacement for (Responsive) image
 *       and oEmbed video. This makes it possible to have a mix of Media
 *       entities, image and videos on a Blazy Grid, Slick, GridStack, etc.
 *       Regular Blazy features are still disabled by default at
 *       \Drupal\blazy\BlazyDefault::richSettings() to avoid complication.
 *       However you can override them accordingly as needed, such as lightbox
 *       for local Video with/o a pre-configured poster image. The #settings
 *       are provided under content variables for more work. Originally
 *       content is a theme_field() output, trimmed down to bare minimum.
 *
 * @see template_preprocess_blazy()
 *
 * @ingroup themeable
 */
#}
{% set blazy_bem_block = blazy_bem_block|default('media') %}
{% set blazy_bem_element = blazy_bem_element|default(false) %}
{% set blazy_bem_modifiers = blazy_bem_modifiers|default([])|merge([
  content ? 'rendered',
  settings.bundle ? 'bundle--' ~ settings.bundle|clean_class,
  settings.namespace ? settings.namespace,
  settings.lazy and settings.use_loading ? 'loading',
  settings.media_switch ? 'switch',
  settings.media_switch ? 'switch--' ~ settings.media_switch|clean_class,
  settings.player ? 'player',
  settings.ratio ? 'ratio',
  settings.ratio ? 'ratio--' ~ settings.ratio,
  settings.responsive_image_style_id ? 'responsive',
  settings.type ? settings.type,
]) %}

{% set blazy_bem_extra = blazy_bem_extra|default([]) %}

{# add extra classes dynamically #}
{% if settings.classes %}
  {% set blazy_bem_extra = blazy_bem_extra|merge([settings.classes|join(' ')|clean_class]) %}
{% endif %}

{% set player %}
  {% block blazy_player %}
    {% if settings.player %}
      <span class="media__icon media__icon--close"></span>
      <span class="media__icon media__icon--play" data-url="{{ settings.embed_url }}"></span>
    {% else %}
      {{ iframe }}
    {% endif %}
  {% endblock  blazy_player %}
{% endset %}

{% set media %}
  {% block blazy_media %}
    <div{{ attributes.addClass(bem(blazy_bem_block, blazy_bem_element, blazy_bem_modifiers, blazy_bem_extra)) }}>
      {{ noscript }}
      {% block blazy_image %}
        {{ content }}
        {{ image }}
        {{ player }}
        {{ settings.icon }}
      {% endblock blazy_image %}
    </div>
  {% endblock blazy_media %}
{% endset %}

{% set blazy %}
  {% block blazy_content %}
    {% if media_attributes %}<div{{ media_attributes }}>{% endif %}
      {% if url and not settings.player %}
        {# Need to add descriptive text to an image wrapped in a link, for accessibility reasons. #}
        {% set read_more = '' %}

        {% if settings.media_switch is defined and settings.media_switch == 'colorbox' %}
          {% set read_more = 'See bigger image in a lightbox' %}
        {% elseif settings.media_switch is defined and settings.media_switch == 'content' %}
          {% if settings.title is defined %}
            {% set read_more = 'Read more about @title'|t({
              '@title': settings.title,
            }) %}
          {% endif %}
        {% endif %}

        <a href="{{ url }}"{{ url_attributes }}{% if read_more is not empty %} aria-label="{{ read_more }}"{% endif %}>
          {{- media -}}
        </a>

        {# Allows fieldable captions with A tag, such as social share. #}
        {% if captions and captions.lightbox is not empty %}
          <div class="litebox-caption visually-hidden">
            {{- captions.lightbox -}}
          </div>
        {% endif %}

      {% else %}
        {{- media -}}
      {% endif %}
    {% if media_attributes %}</div>{% endif %}
  {% endblock blazy_content %}

  {% if captions and captions.inline is defined %}
    {% block blazy_caption %}
      <div{{ caption_attributes }}>
        {% for caption in captions.inline %}
          {% if caption.content %}
            <{{ caption.tag }} {{ caption.attributes }}>
              {{- caption.content -}}
            </{{ caption.tag }}>
          {% endif %}
        {% endfor %}
      </div>
    {% endblock blazy_caption %}
  {% endif %}
  {{ postscript }}
{% endset %}

{% if wrapper_attributes %}
  <div{{ wrapper_attributes }}>
    {{ blazy }}
  </div>
{% else %}
  {{ blazy }}
{% endif %}
