{% load ui_classes ui_props %}

<c-vars name=""
        accept=""
        capture=""
        multiple="False"
        required="False"
        disabled="False"
        invalid="False"
        preview="auto"
        layout="stack"
        size="md"
        heading="Drop files here or browse"
        text=""
        browse_label=""
        empty=""
        max_items="0"
        clearable="True"
        existing_name=""
        existing_url=""
        existing_size=""
        existing_type=""
        clear_name=""
        clear_id=""
        root_class=""
        dropzone_class=""
        list_class=""
        item_class=""
        class="" />
{% ui_class "ui.file-upload" "root" class=root_class as root_class_resolved %}
{% ui_class "ui.file-upload" "control" as control_class %}
{% ui_class "ui.file-upload" "input" class=class as input_class %}
{% ui_class "ui.file-upload" "dropzone" layout=layout size=size class=dropzone_class as dropzone_class_resolved %}
{% ui_class "ui.file-upload" "icon" as icon_class %}
{% ui_class "ui.file-upload" "body" as body_class %}
{% ui_class "ui.file-upload" "heading" as heading_class %}
{% ui_class "ui.file-upload" "text" as text_class %}
{% ui_class "ui.file-upload" "browse" as browse_class %}
{% ui_class "ui.file-upload" "list" class=list_class as list_class_resolved %}
{% ui_class "ui.file-upload" "empty" as empty_class %}
{% ui_class "ui.file-upload" "clear" as clear_class %}
<div x-data="UiFileUpload"
     data-ui-file-upload
     data-ui-file-upload-root
     data-name="{{ name }}"
     data-accept="{{ accept }}"
     data-capture="{{ capture }}"
     data-preview="{{ preview }}"
     data-layout="{{ layout }}"
     data-size="{{ size }}"
     data-heading="{{ heading }}"
     data-text="{{ text }}"
     data-browse-label="{{ browse_label }}"
     data-empty="{{ empty }}"
     data-max-items="{{ max_items }}"
     data-root-class="{{ root_class }}"
     data-dropzone-class="{{ dropzone_class }}"
     data-list-class="{{ list_class }}"
     data-item-class="{{ item_class }}"
     data-class="{{ class }}"
     {% if multiple|ui_bool %}data-multiple="true"{% endif %}
     {% if required|ui_bool %}data-required="true"{% endif %}
     {% if disabled|ui_bool %}data-disabled="true"{% endif %}
     {% if invalid|ui_bool %}data-invalid="true"{% endif %}
     {% if clearable|ui_bool %}data-clearable="true"{% endif %}
     {% if existing_name %}data-has-existing-file="true"{% endif %}
     class="{{ root_class_resolved }}">
    <div data-ui-file-upload-control class="{{ control_class }}">
        {% if slot %}
            {{ slot }}
            <input type="file"
                   data-ui-file-upload-input
                   class="{{ input_class }}"
                   {% if name %}name="{{ name }}"{% endif %}
                   {% if accept %}accept="{{ accept }}"{% endif %}
                   {% if capture %}capture="{{ capture }}"{% endif %}
                   {% if multiple|ui_bool %}multiple{% endif %}
                   {% if disabled|ui_bool %}disabled{% endif %}
                   {% if required|ui_bool %}required{% endif %}
                   {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                   {{ attrs }}>
        {% else %}
            <label data-ui-file-upload-dropzone
                   data-layout="{{ layout }}"
                   data-size="{{ size }}"
                   {% if disabled|ui_bool %}data-disabled="true"{% endif %}
                   {% if invalid|ui_bool %}data-invalid="true"{% endif %}
                   class="{{ dropzone_class_resolved }}">
                <input type="file"
                       data-ui-file-upload-input
                       class="{{ input_class }}"
                       {% if name %}name="{{ name }}"{% endif %}
                       {% if accept %}accept="{{ accept }}"{% endif %}
                       {% if capture %}capture="{{ capture }}"{% endif %}
                       {% if multiple|ui_bool %}multiple{% endif %}
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if required|ui_bool %}required{% endif %}
                       {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                       {{ attrs }}>
                <c-component is="icons.cloud__upload"
                             data-ui-file-upload-icon
                             class="{{ icon_class }}"
                             aria-hidden="true" />
                <span data-ui-file-upload-dropzone-body class="{{ body_class }}">
                    <span data-ui-file-upload-heading class="{{ heading_class }}">{{ heading }}</span>
                    {% if text %}<span data-ui-file-upload-text class="{{ text_class }}">{{ text }}</span>{% endif %}
                </span>
                <span data-ui-file-upload-browse class="{{ browse_class }}">
                    {% if browse_label %}
                        {{ browse_label }}
                    {% elif multiple|ui_bool %}
                        Choose files
                    {% else %}
                        Choose file
                    {% endif %}
                </span>
            </label>
            <c-ui.file-upload.list class="{{ list_class_resolved }}">
                {% if existing_name %}
                    <c-ui.file-upload.item filename="{{ existing_name }}"
                                           filesize="{{ existing_size }}"
                                           mime="{{ existing_type }}"
                                           preview="{{ existing_url }}"
                                           class="{{ item_class }}"
                                           data-existing-file>
                        {% if clear_name and clearable|ui_bool %}
                            <input type="checkbox"
                                   data-ui-file-upload-clear
                                   class="{{ clear_class }}"
                                   name="{{ clear_name }}"
                                   aria-label="Clear existing file {{ existing_name }}"
                                   {% if clear_id %}id="{{ clear_id }}"{% endif %}>
                            <c-ui.file-upload.remove label="Remove {{ existing_name }}" data-existing-file />
                        {% endif %}
                    </c-ui.file-upload.item>
                {% endif %}
                <li data-ui-file-upload-empty
                    class="{{ empty_class }}"
                    {% if existing_name %}hidden{% endif %}>
                    {% if empty %}
                        {{ empty }}
                    {% elif multiple|ui_bool %}
                        No files selected
                    {% else %}
                        No file selected
                    {% endif %}
                </li>
            </c-ui.file-upload.list>
        {% endif %}
    </div>
</div>