{% load ui_assets %}
{% ui_require_asset "trellis:direct-upload" %}

<c-vars name=""
        :values="[]"
        :existing="[]"
        control_id=""
        start_url=""
        complete_url=""
        purpose=""
        accept=""
        preview="auto"
        max_items="1"
        multiple="False"
        required="False"
        disabled="False"
        invalid="False"
        class="" />
<div data-ui-direct-upload
     data-name="{{ name }}"
     data-max-items="{{ max_items }}"
     data-start-url="{{ start_url }}"
     data-complete-url="{{ complete_url }}"
     data-purpose="{{ purpose }}"
     x-data="UiDirectUpload">
    <span data-ui-direct-upload-values hidden>
        {% for value in values %}
            <input type="hidden"
                   name="{{ name }}"
                   value="{{ value.capability }}"
                   data-ui-direct-upload-value
                   data-upload-key="existing-{{ value.upload_id }}">
        {% empty %}
            {% if max_items == "1" %}<input type="hidden" name="{{ name }}" value="" data-ui-direct-upload-value>{% endif %}
        {% endfor %}
    </span>
    <c-ui.file-upload.control id="{{ control_id }}"
                              name="{{ name }}__file"
                              accept="{{ accept }}"
                              preview="{{ preview }}"
                              transport="direct"
                              multiple="{{ multiple }}"
                              max_items="{{ max_items }}"
                              required="{{ required }}"
                              disabled="{{ disabled }}"
                              invalid="{{ invalid }}"
                              class="{{ class }}"
                              :attrs="attrs"
                              x-ui-transition:uploading="upload($transition, id => file(id))">
        {{ slot }}
        <c-slot name="existing">
            {% for item in existing %}
                <c-ui.file-upload.item filename="{{ item.name }}"
                                       filesize="{{ item.size|filesizeformat }}"
                                       mime="{{ item.type }}"
                                       preview="{{ item.url }}"
                                       data-existing-file
                                       data-upload-key="existing-{{ item.upload_id }}">
                    <c-ui.file-upload.remove label="Remove {{ item.name }}"
                                             data-existing-file
                                             data-ui-direct-upload-existing-remove
                                             data-upload-key="existing-{{ item.upload_id }}" />
                </c-ui.file-upload.item>
            {% endfor %}
        </c-slot>
    </c-ui.file-upload.control>
</div>