{# Drag-and-drop Upload-Zone
   Parameter: zone_id, csrf_token, task_id (optional), show_meta (default true)
#}
<div class="upload-widget" data-upload-widget
     data-csrf="{{ csrf_token }}"
     data-max-bytes="{{ max_upload_bytes }}"
     data-allowed="{{ upload_allowed_extensions|join(',') }}"
     data-blocked="{{ upload_blocked_extensions|join(',') }}"
     data-max-mb="{{ max_upload_mb }}"
     {% if task_id is defined and task_id %}data-task-id="{{ task_id }}" data-row-mode="task"{% endif %}
     id="{{ zone_id }}">
  <p class="upload-hint">{{ upload_hint_line3 }}</p>

  <div class="drop-zone" data-drop-zone tabindex="0" role="button" aria-label="Datei hochladen">
    <input type="file" class="drop-zone-input" data-file-input multiple hidden>
    <div class="drop-zone-content">
      <div class="drop-zone-icon">⬆</div>
      <p class="drop-zone-title">Dateien hierher ziehen</p>
      <p class="drop-zone-sub">oder klicken zum Auswählen</p>
      <p class="drop-zone-types">{{ upload_hint_line1 }} · {{ upload_hint_line2 }}</p>
    </div>
  </div>

  <div class="upload-status" data-upload-status hidden></div>

  {% if show_meta is not defined or show_meta %}
  <div class="upload-meta grid-2">
    <div class="form-group">
      <label for="{{ zone_id }}-category">Kategorie</label>
      <select id="{{ zone_id }}-category" data-upload-category>
        <option value="">–</option>
        {% for c in categories %}
        <option value="{{ c }}">{{ c }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="form-group">
      <label for="{{ zone_id }}-description">Beschreibung</label>
      <input type="text" id="{{ zone_id }}-description" data-upload-description>
    </div>
    <div class="form-group">
      <label for="{{ zone_id }}-tags">Tags (kommagetrennt)</label>
      <input type="text" id="{{ zone_id }}-tags" data-upload-tags>
    </div>
  </div>
  {% endif %}
</div>