<div class="attachment-preview is-flex is-flex-direction-column is-align-items-center mx-2">
    {% if file.mime_type|media_type_main == 'image' %}
        <!-- Show image thumbnail -->
        <div class="thumbnail-container">
            <img src="{{ file.url }}" class="thumbnail-image" alt="{{file.name}}">
        </div>
    {% elif file.mime_type|media_type_main == 'video' %}
        <!-- Show video thumbnail with play icon -->
        <a href="{{file.url}}" class="is-video-thumbnail-wrapper is-wrapping photo_thumb_click">
            <img class="is-photo-thumbnail" src="{{file.thumb_url}}">
            <div class="media_overlay_play is-flex has-items-centered">
                <span class="icon">
                    <i class="icon-play-circled"></i>
                </span>
            </div>
        </a>
    {% else %}
        <!-- Show a generic file icon if not an image or video -->
        {{ icon('doc', cls='icon is-large') }}
    {% endif %}
    <div class="attachment-name mx-2 has-text-weight-bold" title="{{ file.name }}">{{ file.name }}</div>
    <button class="delete is-small attachment-delete-button action_delete"></button>
    {% if uploading %}
        <progress class="progress is-info has-background-white" value="0" max="100">0%</progress>
    {% endif %}
</div>