{% load ui_classes ui_props %}

<c-vars filename=""
        filesize=""
        mime=""
        preview=""
        icon="document__blank"
        invalid="False"
        error=""
        class="" />
{% ui_class "ui.file-upload" "item" class=class as item_class %}
{% ui_class "ui.file-upload" "preview" as preview_class %}
{% ui_class "ui.file-upload" "previewImage" as preview_image_class %}
{% ui_class "ui.file-upload" "itemIcon" as item_icon_class %}
{% ui_class "ui.file-upload" "itemBody" as item_body_class %}
{% ui_class "ui.file-upload" "itemName" as item_name_class %}
{% ui_class "ui.file-upload" "itemMeta" as item_meta_class %}
{% ui_class "ui.file-upload" "itemError" as item_error_class %}
<li data-ui-file-upload-item
    {% if invalid|ui_bool %}data-invalid="true"{% endif %}
    class="{{ item_class }}"
    {{ attrs }}>
    <span data-ui-file-upload-preview class="{{ preview_class }}" aria-hidden="true">
        {% if preview %}
            <c-ui.image src="{{ preview }}" alt="" class="{{ preview_image_class }}" />
        {% elif icon %}
            <c-component is="icons.{{ icon }}"
                         data-ui-file-upload-item-icon
                         class="{{ item_icon_class }}"
                         aria-hidden="true" />
        {% endif %}
    </span>
    <span data-ui-file-upload-item-body class="{{ item_body_class }}">
        <span data-ui-file-upload-item-filename class="{{ item_name_class }}">{{ filename }}</span>
        {% if filesize or mime %}
            <span data-ui-file-upload-item-meta class="{{ item_meta_class }}">
                {% if filesize %}{{ filesize }}{% endif %}
                {% if filesize and mime %}·{% endif %}
                {% if mime %}{{ mime }}{% endif %}
            </span>
        {% endif %}
        {% if error %}<span data-ui-file-upload-item-error class="{{ item_error_class }}">{{ error }}</span>{% endif %}
    </span>
    {{ slot }}
</li>