{% load i18n %}
<div class="dropzone-wrapper">
    <div class="loader hide"></div>
    {% if widget.is_initial %}
        <div class="current-file">
            {{ widget.initial_text }}: <a href="{{ widget.value.url }}" target="_blank">{{ widget.value }}</a>
        </div>
    {% endif %}
    <div class="dropzone">
        <div class="dragdrop" id="dropzone-dragdrop">
            <div class="dragdrop-box">
                <div class="dragdrop-box-icon">
                    <svg xmlns="http://www.w3.org/2000/svg"
                         width="16"
                         height="16"
                         fill="currentColor"
                         class="bi bi-upload"
                         viewBox="0 0 16 16">
                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5">
                        </path>
                        <path d="M7.646 1.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 2.707V11.5a.5.5 0 0 1-1 0V2.707L5.354 4.854a.5.5 0 1 1-.708-.708z">
                        </path>
                    </svg>
                </div>
                <div class="dragdrop-box-text">
                    <span>{% translate 'Drag and drop' %}</span>
                    <span><b>
                        {% if widget.attrs.multiple %}
                            {% translate 'Multiple Files' %}
                        {% else %}
                            {% translate 'Single File' %}
                        {% endif %}
                    </b></span>
                    <span>{% translate 'or' %}</span>
                    <span>{% translate 'click here' %}.</span>
                </div>
            </div>
        </div>
        <div class="dropzone-preview">
            <input type="{{ widget.type }}"
                   name="{{ widget.name }}"
                   {% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %}
                   {% include "django/forms/widgets/attrs.html" %}>
            <div class="preview">
                <div class="add-files">
                    <button type="button" class="btn btn-success btn-add-file">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="16"
                             height="16"
                             fill="currentColor"
                             class="bi bi-plus-circle-fill"
                             viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z">
                            </path>
                        </svg>
                        {% translate 'Add Files' %}
                    </button>
                    <div id="dropzone-preview"></div>
                </div>
                <div class="btn-actions hide">
                    <button type="submit" class="btn btn-primary btn-upload" name="_add">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="16"
                             height="16"
                             fill="currentColor"
                             class="bi bi-cloud-arrow-up-fill"
                             viewBox="0 0 16 16">
                            <path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2m2.354 5.146a.5.5 0 0 1-.708.708L8.5 6.707V10.5a.5.5 0 0 1-1 0V6.707L6.354 7.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0z">
                            </path>
                        </svg>
                        {% translate 'Start Upload' %}
                    </button>
                    <button type="button" class="btn btn-warning btn-cancel">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             width="16"
                             height="16"
                             fill="currentColor"
                             class="bi bi-x-circle-fill"
                             viewBox="0 0 16 16">
                            <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z">
                            </path>
                        </svg>
                        {% translate 'Clear All' %}
                    </button>
                </div>
            </div>
            <div id="dropzone-response"></div>
        </div>
    </div>
</div>
