<div class="file-record relative" ...attributes>
    <div class="flex flex-col items-center justify-center">
        <div
            class="file-record-icon {{@fileIconClass}} flex items-center justify-center mb-2 rounded-lg shadow-sm border-4 border-transparent dark:border-gray-900"
            style={{this.fileBackgroundStyle}}
        >
            {{#if this.isVideo}}
                <FaIcon @icon="file-video" @size="3x" class="text-sky-400" />
            {{/if}}
        </div>
        <div class="bg-blue-500 text-gray-100 text-xs text-center rounded-md px-3 py-1 truncate w-32">
            <span>{{@file.original_filename}}</span>
        </div>
        {{#if (has-block)}}
            <div class="mt-2">
                {{yield @file}}
            </div>
        {{/if}}
    </div>
    <div class="absolute top-0 right-0">
        <a
            href="javascript:;"
            {{on "click" (fn this.deleteFile @file)}}
            class="flex items-center justify-center text-center p-1 -mt-2 rounded-full w-6 h-6 hover:opacity-75 bg-red-400 shadow-md text-xs"
        >
            <FaIcon @icon="trash" class="text-white" />
        </a>
    </div>
</div>