<div class="field">
    <div class="heading">
        <label>{{ field.label }}</label>
    </div>
    <div class="file-preview elements chips chips-small">
        {% set assets = submission.getAssets(field.handle) %}

        {% if assets %}
            {% for asset in assets|filter(asset => asset is not null) %}
                {% set thumbSizes = [30, 60, 100, 200] %}
                {% set srcset = "" %}
                {%- if asset.kind == 'image' -%}
                    {%- for size in thumbSizes -%}
                        {% set thumbTransform = { width: size, height: size } %}
                        {% set srcset = srcset ~ ", " ~ asset.getUrl(thumbTransform) ~ " " ~ size ~ "w" %}
                    {%- endfor -%}
                    {% set srcset = srcset|trim(", ") %}
                {%- else -%}
                    {# Use getThumbUrl for non-image files like PDFs #}
                    {% set srcset = craft.app.assets.thumbUrl(asset, 200, 200) %}
                {%- endif -%}
                {% set srcset = srcset|trim(", ") %}

                <div class="element small removable hasthumb chip" style="padding-right: 20px;">
                    <input type="hidden" name="{{ field.handle }}[]"
                           value="{{ asset.id }}">
                    <a href="javascript:;" onclick="removeAsset(this);" class="icon delete"></a>
                    <div class="elementthumb thumb">
                        <img sizes="30px" srcset="{{ srcset }}" alt="">
                    </div>
                    <label class="chip-content">
                        <a href="javascript:;" data-asset-id="{{ asset.id }}">
                            {{ asset.title }}
                        </a>
                    </label>
                </div>
            {% endfor %}
        {% else %}
            {{ "No files uploaded"|t('freeform') }}
        {% endif %}
    </div>
    <div class="field">
        <input type="file" name="{{ field.handle }}[]" multiple />
    </div>
</div>
