{% load i18n %}
<div class="vs3d-widget"
     data-vs3d-widget
     data-config="{{ widget.config }}">

  {% if widget.destination_missing %}
    <p class="vs3d-error" role="alert">
      {% blocktranslate with destination=widget.destination %}Upload destination "{{ destination }}" is not configured.{% endblocktranslate %}
    </p>
  {% endif %}

  <div class="vs3d-current"{% if not widget.current_name %} hidden{% endif %} data-vs3d-current>
    {% if widget.is_pending %}
      <span class="vs3d-current__badge">{% translate "Pending upload" %}</span>
      <span class="vs3d-current__name">{{ widget.current_name }}</span>
    {% else %}
      {% if widget.current_url %}
        <a class="vs3d-current__link" href="{{ widget.current_url }}" target="_blank" rel="noopener noreferrer">{{ widget.current_name }}</a>
      {% else %}
        <span class="vs3d-current__name">{{ widget.current_name }}</span>
      {% endif %}
    {% endif %}
    {% if not widget.is_required %}
      <button type="button" class="vs3d-current__remove" data-vs3d-remove>{% translate "Remove" %}</button>
    {% endif %}
  </div>

  <input type="hidden" name="{{ widget.name }}" value="{{ widget.value }}" data-vs3d-value{% if widget.attrs.id %} id="{{ widget.attrs.id }}"{% endif %}>
  <input type="hidden" name="{{ widget.clear_checkbox_name }}" value="" data-vs3d-clear>
  <input type="file" class="vs3d-input" data-vs3d-file{% if widget.allow_multiple %} multiple{% endif %}>

  <noscript>
    <p class="vs3d-error">{% translate "JavaScript is required to upload files to this field." %}</p>
  </noscript>
</div>