{% load url %}
{% load clean from bleach %}

{% url "api:upload-list" as upload_list_view %}
{{ upload_list_view|json_script:"uploadListView" }}
{{ widget.allowed_file_types.value|json_script:widget.allowed_file_types.id }}

<div class="user-upload"
     data-input-id="{{ widget.attrs.id }}"
     data-input-name="{{ widget.name }}"
     data-initialized="false"
     {% if widget.attrs.multiple %}data-multiple=true{% endif %}
>
    <div id="{{ widget.attrs.id }}-drag-drop" class="mb-3"></div>

    <div id="{{ widget.attrs.id }}-progress"></div>

    <ul id="{{ widget.attrs.id }}-file-list" class="mb-3 list-group">
        {% for subwidget in widget.subwidgets %}
            <li class="list-group-item">
                <i class="fas fa-check fa-fw text-success" title="File Successfully Uploaded"></i> {{ subwidget.value }}
            </li>
        {% empty %}
            {% if widget.value %}
                <li class="list-group-item">
                    <i class="fas fa-check fa-fw text-success" title="File Successfully Uploaded"></i> {{ widget.value }}
                </li>
            {% else %}
                <li id="{{ widget.attrs.id }}-no-files-warning" class="list-group-item">
                    <i class="fas fa-exclamation-triangle fa-fw text-warning"></i> No files uploaded yet
                </li>
            {% endif %}
        {% endfor %}
    </ul>

    {% if widget.subwidgets %}
        {% spaceless %}
            {% for widget in widget.subwidgets %}{% include widget.template_name %}{% endfor %}
        {% endspaceless %}
    {% elif not widget.attrs.multiple %}
        <input id="{{ widget.attrs.id }}"
                type="hidden"
                name="{{ widget.name }}"
                {% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %}
                {% include "django/forms/widgets/attrs.html" %}
        >
    {% endif %}
    {% if widget.attrs.help_text %}
        <small id="hint_{{ widget.attrs.id }}" class="form-text text-muted">{{ widget.attrs.help_text|clean }}</small>
    {% endif %}
</div>