<div class="x-myorders-file" ...attributes>
    <div class="x-myorders-file-wrapper">
        <div class="x-myorders-file-actions">
            <DropdownButton @dropdownId="x-myorders-file-actions-dropdown" @icon="ellipsis" @iconSize="xs" @iconPrefix={{@dropdownButtonIconPrefix}} @text={{@dropdownButtonText}} @size="xs" @horizontalPosition="left" @calculatePosition={{@dropdownButtonCalculatePosition}} @renderInPlace={{or @dropdownButtonRenderInPlace true}} @wrapperClass={{concat @dropdownButtonWrapperClass " " "next-nav-item-dropdown-button"}} @triggerClass={{@dropdownButtonTriggerClass}} @registerAPI={{@registerAPI}} @onInsert={{this.onDropdownButtonInsert}} as |dd|>
                <div class="next-dd-menu mt-0i" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                    <div class="px-1">
                        <div class="text-sm flex flex-row items-center px-3 py-1 rounded-md my-1 text-gray-800 dark:text-gray-300">
                            {{t "component.file.dropdown-label"}}
                        </div>
                    </div>
                    <div class="next-dd-menu-seperator"></div>
                    <div role="group" class="px-1">
                        {{!-- template-lint-disable no-nested-interactive --}}
                        <a href="javascript:;" role="menuitem" class="next-dd-item text-danger" {{on "click" (fn this.onDropdownItemClick "onDelete" dd)}}>
                            <span class="mr-1">
                                <FaIcon @icon="trash" @prefix={{@dropdownButtonIconPrefix}} />
                            </span>
                            {{t "common.delete"}}
                        </a>
                    </div>
                </div>
            </DropdownButton>
        </div>
        <div class="flex flex-1 flex-col justify-between items-center">
            <div class="flex-1">
                {{#if this.isImage}}
                    <Image src={{@file.url}} alt={{@file.original_filename}} class="x-myorders-file-preview rounded-md shadow-sm" />
                {{else}}
                    <div class="x-myorders-file-preview">
                        <FileIcon @file={{@file}} @hideExtension={{true}} @iconSize="2xl" />
                    </div>
                {{/if}}
            </div>
            <div class="flex-1 overflow-hidden flex flex-col items-center justify-end">
                <div class="x-myorders-file-name">
                    {{truncate-filename @file.original_filename}}
                </div>
            </div>
        </div>
    </div>
</div>