{# API #}
{%- set props = props | default([]) -%}
{%- set _editText = props.editText | default('Edit') -%}
{%- set _fileName = props.fileName | default(null) -%}
{%- set _generateImagePreview = props.generateImagePreview | default(false) -%}
{%- set _iconName = props.iconName | default('file') -%}
{%- set _imageObjectFit = props.imageObjectFit | default(null) -%}
{%- set _imagePreview = props.imagePreview | default(null) -%}
{%- set _onEdit = props.onEdit | default(null) -%}
{%- set _removeText = props.removeText | default('Remove') -%}

{# Class names #}
{%- set _rootClassName = _spiritClassPrefix ~ 'FileUploaderAttachment' -%}
{%- set _imageClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__image' -%}
{%- set _nameClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__name' -%}
{%- set _actionClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__action' -%}
{%- set _slotClassName = _spiritClassPrefix ~ 'FileUploaderAttachment__slot' -%}
{%- set _textTruncateClassName = _spiritClassPrefix ~ 'text-truncate' -%}

{# Attributes #}
{%- set _dataImagePreviewAttr = _generateImagePreview ? 'data-spirit-imagePreview="true"' : null -%}
{%- set _imageObjectFitAttr = _imageObjectFit ? 'style="--file-uploader-attachment-image-object-fit: ' ~ _imageObjectFit | escape('html_attr') ~ '"' : null -%}

{# Miscellaneous #}
{%- set _styleProps = useStyleProps(props) -%}
{%- set _classNames = [ _rootClassName, _styleProps.className ] -%}
{%- set _mainPropsWithoutReservedAttributes = props | filter((value, prop) => prop not in ['onEdit', 'data-spirit-populate-field', 'data-spirit-imagePreview']) -%}

<li
    {{ mainProps(_mainPropsWithoutReservedAttributes) }}
    {{ classProp(_classNames) }}
    {{ styleProp(_styleProps) }}
    data-spirit-populate-field="item"
    {{ _dataImagePreviewAttr | raw }}
>
    {% if _generateImagePreview or _imagePreview %}
        <span class="{{ _imageClassName }}" data-spirit-element="attachment-image">
            <img 
                src="{{ _imagePreview }}" 
                {{ _imageObjectFitAttr | raw }} 
                width="54" 
                height="54" 
                alt="{{- _fileName -}}" 
            />
        </span>
    {% endif %}
    {% if not _imagePreview %}
        <Icon name="{{ _iconName }}" isReusable={ false } />
    {% endif %}
    <span class="{{ _nameClassName }}">
        <span class="{{ _textTruncateClassName }}" data-spirit-populate-field="name">
            {{- _fileName -}}
        </span>
    </span>
    {% if _onEdit %}
        <span class="{{ _slotClassName }}">
            <button type="button" class="{{ _actionClassName }}" onclick="{{ _onEdit }}">
                <VisuallyHidden>{{ _editText }}</VisuallyHidden>
                <Icon name="edit" isReusable={ false } />
            </button>
        </span>
    {% endif %}
    <button
        type="button"
        class="{{ _actionClassName }}"
        data-spirit-populate-field="button"
    >
        <VisuallyHidden>{{ _removeText }}</VisuallyHidden>
        <Icon name="close" isReusable={ false } />
    </button>
</li>
