{% with id=widget.attrs.id %}<div class="dropzone"{% if id %} id="{{ id }}_dropzone"{% endif %} x-data="{
  files: [],
  dragging: false,
  error: '',
  maxSize: {{ widget.max_size|default:"0" }},
  isAccepted(file) {
    const accept = $refs.input.accept;
    if (!accept) return true;
    return accept.split(',').some(p => {
      p = p.trim();
      if (p.endsWith('/*')) return file.type.startsWith(p.replace('/*', '/'));
      if (p.startsWith('.')) return file.name.toLowerCase().endsWith(p.toLowerCase());
      return file.type === p;
    });
  },
  validate(files) {
    this.error = '';
    const all = [...files];
    let valid = all.filter(f => this.isAccepted(f));
    const typeRejected = all.length - valid.length;
    if (this.maxSize) {
      const oversized = valid.filter(f => f.size > this.maxSize);
      valid = valid.filter(f => f.size <= this.maxSize);
      if (oversized.length) this.error = oversized.length + ' file(s) too large';
    }
    if (typeRejected) this.error = (this.error ? this.error + ', ' : '') + typeRejected + ' file(s) wrong type';
    return valid;
  },
  handleDrop(e) {
    this.dragging = false;
    const valid = this.validate(e.dataTransfer.files);
    if (!valid.length) return;
    const dt = new DataTransfer();
    valid.forEach(f => dt.items.add(f));
    this.$refs.input.files = dt.files;
    this.files = valid;
  },
  handleChange(e) {
    const valid = this.validate(e.target.files);
    if (valid.length < e.target.files.length) {
      const dt = new DataTransfer();
      valid.forEach(f => dt.items.add(f));
      e.target.files = dt.files;
    }
    this.files = valid;
  },
  formatSize(bytes) {
    if (bytes < 1024) return bytes + ' B';
    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
    return (bytes / 1048576).toFixed(1) + ' MB';
  }
}" @dragover.prevent="dragging = true" @dragleave.prevent="dragging = false" @drop.prevent="handleDrop($event)">
  <div class="dropzone-area" :class="dragging && 'dragging'" @click="$refs.input.click()">
    <input x-ref="input" type="file" name="{{ widget.name }}"{% if id %} id="{{ id }}"{% endif %} @change="handleChange($event)"{% for name, value in widget.attrs.items %}{% if value is not False and name != "class" and name != "id" %} {{ name }}{% if value is not True %}="{{ value|stringformat:'s' }}"{% endif %}{% endif %}{% endfor %}>
    <div x-show="!files.length">
      <svg class="dropzone-prompt-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 13v8"/><path d="M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242"/><path d="m8 17 4-4 4 4"/></svg>
      <p class="dropzone-prompt-text">Drag and drop files here or <span class="dropzone-browse">browse</span></p>
      {% if widget.accept_display or widget.max_size_display %}<p class="dropzone-accept-text">{% if widget.accept_display %}{{ widget.accept_display }}{% endif %}{% if widget.accept_display and widget.max_size_display %} · {% endif %}{% if widget.max_size_display %}Max {{ widget.max_size_display }}{% endif %}</p>{% endif %}
    </div>
    <div x-show="files.length" x-cloak>
      <template x-for="file in files" :key="file.name">
        <p class="dropzone-file" x-text="file.name + ' (' + formatSize(file.size) + ')'"></p>
      </template>
    </div>
    <p x-show="error" x-text="error" x-cloak class="dropzone-error"></p>
  </div>
</div>{% endwith %}