<div class="table-cell-resource-identity {{this.wrapperClass}}" ...attributes>
    <button
        type="button"
        disabled={{and @column.permission (cannot @column.permission)}}
        {{on "click" this.onClick}}
        class="flex min-w-0 items-start gap-2 text-left py-0.5"
    >
        <div class="relative flex {{this.imageSizeClass}} flex-shrink-0 items-center justify-center">
            <Image
                src={{this.mediaUrl}}
                @fallbackSrc={{this.fallbackImage}}
                alt={{this.altText}}
                data-test-resource-identity-image
                class="{{this.imageSizeClass}} {{this.imageRoundedClass}} border border-gray-200 object-cover shadow-sm dark:border-gray-700"
            />
            {{#if this.hasStatusDot}}
                <FaIcon
                    @icon="circle"
                    @size="2xs"
                    class="absolute left-0 top-0 -ml-1 -mt-1 {{this.statusDotClass}}"
                    data-test-resource-identity-status-dot
                />
            {{/if}}
        </div>
        <div class="min-w-0 text-left">
            <div class="truncate text-sm leading-4 text-gray-900 hover:text-blue-600 dark:text-gray-200 dark:hover:text-blue-300">
                {{#if (has-block)}}
                    {{yield}}
                {{else}}
                    {{n-a this.label}}
                {{/if}}
            </div>
            <div class="mt-px flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs leading-3 text-gray-500 dark:text-gray-400">
                {{#each this.metaItems as |item|}}
                    {{#if (eq item.style "badge")}}
                        <span
                            data-test-resource-identity-meta-badge
                            class="inline-flex min-w-0 max-w-full items-center rounded-lg bg-gray-200 px-1 py-0 text-[10px] leading-4 text-gray-700 shadow-sm dark:bg-gray-800 dark:text-gray-300 {{item.class}}"
                        >
                            {{#if item.icon}}
                                <FaIcon @icon={{item.icon}} @prefix={{or item.iconPrefix "fas"}} @size={{or item.iconSize "xs"}} class="mr-1 flex-shrink-0 {{item.iconClass}}" />
                            {{/if}}
                            <span class="truncate">{{n-a item.value}}</span>
                        </span>
                    {{else}}
                        <span class="truncate {{item.class}}">{{n-a item.value}}</span>
                    {{/if}}
                {{/each}}
                {{#if (and this.showStatusBadge this.statusLabel)}}
                    <Badge
                        @status={{this.statusLabel}}
                        @wrapperClass={{this.statusBadgeWrapperClass}}
                        @spanClass={{this.statusBadgeSpanClass}}
                        @iconClass={{this.statusBadgeIconClass}}
                        @iconSize={{this.statusBadgeIconSize}}
                        @size={{this.statusBadgeSize}}
                        data-test-resource-identity-status-badge
                    />
                {{else if this.statusLabel}}
                    <span class="truncate capitalize">{{smart-humanize this.statusLabel}}</span>
                {{/if}}
            </div>
        </div>
    </button>
</div>
