{% load ui_classes ui_props %}

<c-vars heading="Drop files here or browse"
        text=""
        icon="cloud__upload"
        layout="stack"
        size="md"
        disabled="False"
        invalid="False"
        class="" />
{% ui_class "ui.file-upload" "dropzone" layout=layout size=size class=class as dropzone_class %}
{% 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 %}
<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 }}"
       {{ attrs }}>
    {% if icon %}
        <c-component is="icons.{{ icon }}"
                     data-ui-file-upload-icon
                     class="{{ icon_class }}"
                     aria-hidden="true" />
    {% endif %}
    {% if slot %}
        {{ slot }}
    {% else %}
        <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 }}">Choose file</span>
    {% endif %}
</label>