{% load l10n %}

<div class="ba-file-uploader"
     data-form-name="{{ dpl.form_name }}"
     data-field-name="{{ dpl.field_name }}"
     data-accept="{{ dpl.accept }}"
     data-max-size="{{ dpl.max_size|unlocalize }}"
     data-show-path="{{ dpl.show_path }}"
     data-show-path-temp="{{ dpl.show_path_temp }}">
    <div class="ba-upload-container">
        <div class="ba-upload-dropzone">
            <span>{% if widget.attrs.multiple %}Dateien{% else %}Datei{% endif %} in diesen Bereich ziehen</span>
            <span>oder </span>
            <div class="ba-upload-control ba-btn ba-btn-ghost ba-btn-icon ba-icon-upload">
                <span aria-hidden="true">
                    {% if widget.attrs.multiple %}Dateien{% else %}Datei{% endif %} auswählen
                </span>
                <input type="file"
                       id="{{ widget.attrs.id }}"
                       name="{{ widget.name }}"
                       value="{{ widget.value }}"
                       {% if dpl.accept %}accept="{{ dpl.accept }}"{% endif %}
                       {% if widget.attrs.multiple %}multiple="true"{% endif %}"
                       aria-describedby="extra-text-{{ widget.attrs.id }}">
            </div>
        </div>

        {% if dpl.accept_label or dpl.max_size %}
            <p id="extra-text-accpet{{ widget.attrs.id }}" class="form-text">
                {% if dpl.accept_label %}{{ dpl.accept_label }}{% endif %}
                {% if dpl.max_size_natural %}
                    {% if dpl.accept_label %}, {% endif %}
                    {{ dpl.max_size_natural }}
                {% endif %}
            </p>
        {% endif %}
        {% if widget.extra_text %}
            <p id="extra-text-{{ widget.attrs.id }}" class="form-text">{{ widget.extra_text }}</p>
        {% endif %}

        <div class="ba-upload-message-container"></div>

        <div class="ba-upload-files-container ba-upload-files-{% if dpl.temp_uploads or dpl.existing_files %}visible{% else %}hidden{% endif %}">
            <ul class="ba-upload-files ba-upload-current-files" aria-label="Aktuelle Datei">

                {# Temp uploads rendered on form bounce — shown as the current file #}
                {% for t in dpl.temp_uploads %}
                    <li class="ba-upload-success" data-filename="{{ t.name }}" data-temp-id="{{ t.id }}" data-type="temp">
                        <span class="ba-title">{{ t.name }}</span>
                        <span class="sr-only">Status: Hochgeladen</span>
                        <button class="ba-upload-delete" title="löschen" data-dpl-button-temp="1"
                                aria-label="Datei {{ t.name }} löschen"></button>
                    </li>
                {% endfor %}

                {# Existing files — hidden when a temp upload already represents the new state #}
                {% for f in dpl.existing_files %}
                    {% with input_name=dpl.field_name|add:"__delete__"|add:f.key %}
                        <li class="{% if f.marked %}ba-upload-error{% else %}ba-upload-success{% endif %} dpl-existing-item{% if dpl.temp_uploads %} ba-upload-files-hidden{% endif %}"
                            data-existing-key="{{ f.key }}" data-marked="{{ f.marked|yesno:'1,0' }}" data-type="existing">
                            <span class="ba-title">{{ f.name }}</span>
                            <input type="hidden"
                                   name="{{ input_name }}"
                                   value="{{ f.marked|yesno:'1,0' }}"
                                   data-dpl-delete-input="1"/>
                            <button class="ba-upload-delete" title="löschen" data-dpl-button-extisting="1"
                                    aria-label="Datei {{ f.name }} löschen"></button>
                        </li>
                    {% endwith %}
                {% endfor %}
            </ul>
        </div>
    </div>
</div>