{% load i18n %}<div class="dropzone"{% if widget.attrs.id %} id="{{ widget.attrs.id }}_dropzone"{% endif %} x-data="formworkFileDropzone"{% if widget.max_size %} data-max-size="{{ widget.max_size }}"{% endif %} data-type-error="{% translate 'File type not accepted' %}" data-size-error="{% translate 'File too large' %}" data-count-text="{{ widget.count_text }}" @dragover.prevent="onDragOver()" @dragleave.prevent="onDragLeave()" @drop.prevent="drop($event)">
  <div class="dropzone-area" :class="dragClass">
    <input x-ref="input" type="file" name="{{ widget.name }}" class="sr-only" @change="onChange()"{% for name, value in widget.attrs.items %}{% if value is not False and name != "class" %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
    <div x-show="!files.length" @click="browse()">
      <i class="icon icon-cloud-upload dropzone-prompt-icon" aria-hidden="true"></i>
      <p class="dropzone-prompt-text">{% translate "Drag and drop files here" %} <span class="dropzone-browse">{% translate "or browse" %}</span></p>
      {% if widget.accept_display or widget.max_size_display %}<p class="dropzone-accept-text">{{ widget.accept_display }}{% if widget.accept_display and widget.max_size_display %} · {% endif %}{% if widget.max_size_display %}{% blocktranslate with size=widget.max_size_display %}Max {{ size }}{% endblocktranslate %}{% endif %}</p>{% endif %}
    </div>
    <div x-show="files.length" x-cloak class="dropzone-preview-area">
      <button type="button" class="dropzone-remove" @click.stop="clear()" aria-label="{% translate 'Remove file' %}"><i class="icon icon-x dropzone-remove-icon" aria-hidden="true"></i></button>
      <div class="dropzone-file-preview" @click="browse()">
        <i class="icon icon-file dropzone-file-icon" aria-hidden="true"></i>
        <p class="dropzone-file-name" x-text="summary"></p>
        <p class="dropzone-file-size" x-text="details"></p>
      </div>
    </div>
    <p x-show="error" x-text="error" x-cloak role="alert" class="dropzone-error"></p>
  </div>
</div>