{#
/**
 * @file
 * Theme override for an image field widget.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - data: Render elements of the image widget.
 * - multiple: Whether this widget is the part of a multi-value file widget or
 *   not.
 * - upload: Whether the file upload input is displayed or not.
 * - has_value: true if the widget already contains an image.
 * - has_meta: true when one of the title or alt inputs are enabled and visible.
 *
 * @see template_preprocess_image_widget()
 * @see stable_preprocess_image_widget()
 * @see claro_preprocess_image_widget()
 */
#}
{%
  set classes = [
    'form-managed-file--image',
    multiple ? 'is-multiple' : 'is-single',
    upload ? 'has-upload' : 'no-upload',
    has_value ? 'has-value' : 'no-value',
    has_meta ? 'has-meta' : 'no-meta',
    data.preview ? 'has-preview' : 'no-preview',
  ]
%}
<div{{ attributes.addClass(classes).removeClass('clearfix') }}>
  <div class="form-managed-file__main">
    {{ data|without('preview', 'alt', 'title')}}
  </div>

  {% if has_meta or data.preview %}
  <div class="form-managed-file__meta-wrapper">
    <div class="form-managed-file__meta">
      {% if data.preview %}
        <div class="form-managed-file__image-preview image-preview">
          <div class="image-preview__img-wrapper">
            {{ data.preview }}
          </div>
        </div>
      {% endif %}

      {% if data.alt or data.title %}
        <div class="form-managed-file__meta-items">
      {% endif %}

      {{ data.alt }}
      {{ data.title }}

      {% if data.alt or data.title %}
        </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>