{#
/**
 * @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.
 *
 * Important!
 * If you are adding additional contents to any content-related variable here,
 * e.g.: content, overlay, preface, postscript, etc., including icon, be sure to
 * add your own key, normally unique like UUID or module name, to not conflict
 * against, or nullify, other providers, e.g.:
 * Good: postscript.cta, or postscript.widget (This extends postscript)
 * Bad: postscript = cta (This overrides/ nullifies other postscripts with cta)
 *
 * 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.
 *   - preface: any extra content prefacing the image/ video goes here.
 *   - overlay: any extra content overlaying the image/ video goes here. Both
 *       preface and overlay useful to work with layering, z-index. This opens
 *       up possibility for blazy-related modules -- Slick, GridStack, etc. to
 *       use blazy.html.twig for their slide or item contents, perhaps at 3+.
 *   - postscript: Any extra content to put into blazy goes here.
 *   - 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 classes = [
    content ? 'media--rendered',
    settings.namespace ? 'media--' ~ settings.namespace,
    settings.media_switch ? 'media--switch media--switch--' ~ settings.media_switch|clean_class,
    blazies.is.player ? 'media--player',
    blazies.media.bundle ? 'media--bundle--' ~ blazies.media.bundle|clean_class,
    blazies.media.type ? 'media--' ~ blazies.media.type,
    blazies.resimage.id ? 'media--responsive',
    settings.ratio ? 'media--ratio media--ratio--' ~ settings.ratio,
    settings.use_loading or blazies.use.loader ? 'is-b-loading',
    settings.classes ? settings.classes|join(' ')|clean_class,
  ]
%}

{% if blazies.is.player %}
  {% set attributes = attributes.setAttribute('aria-live', 'polite') %}

  {% set label = blazies.media.label %}
  {% set play_title = 'Load and play video.'|t %}
  {% set close_title = 'Stop and close video.'|t %}

  {% if label %}
    {% set play_title = 'Load and play the video "@label".'|t({'@label': label}) %}
    {% set close_title = 'Stop and close the video "@label".'|t({'@label': label}) %}
  {% endif %}

  {% set play_button_attributes = create_attribute({
    'aria-label': play_title,
    'class': ['media__icon', 'media__icon--play'],
    'data-url': blazies.media.embed_url,
    'data-iframe-title': label,
    'title': play_title,
    'type': 'button'
  }) %}

  {% set close_button_attributes = create_attribute({
    'aria-label': close_title,
    'class': ['media__icon', 'media__icon--close'],
    'title': close_title,
    'type': 'button'
  }) %}
{% endif %}

{% set player %}
  {% block blazy_player %}
    {% if blazies.is.player %}
      <button{{ close_button_attributes }}></button>
      <button{{ play_button_attributes }}></button>
    {% else %}
      {{- iframe -}}
    {% endif %}
  {% endblock %}
{% endset %}

{% set media %}
  {% block blazy_media %}
    <div{{ attributes.addClass(classes) }}>
      {{- preface -}}
      {{- content -}}
      {{- image -}}
      {# Above image, to minimize CSS works. #}
      {{- noscript -}}
      {{- overlay -}}
      {{- player -}}

      {# @todo settings.icon is deprecated in 2.0 and is removed from 3.0. Use icon instead. #}
      {{- settings.icon -}}
      {{- icon -}}
    </div>
  {% endblock %}
{% endset %}

{% set blazy %}
  {% block blazy_content %}
    {% if media_attributes %}<div{{ media_attributes }}>{% endif %}
      {% if url and not blazies.is.player %}
        <a href="{{ url }}"{{ url_attributes }}>{{- 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 %}

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

  {{- postscript -}}

{% endset %}

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