<div class="storefront-dashboard-widget storefront-kpi-tile {{this.accentClass}} h-full rounded-md border shadow-sm overflow-hidden" ...attributes>
    <div class="flex h-full flex-col justify-between p-3">
        <div class="flex items-start justify-between gap-2">
            <div class="min-w-0">
                <div class="text-[10px] font-bold uppercase text-gray-500 dark:text-gray-400 truncate">{{this.title}}</div>
                {{#if this.error}}
                    <div class="mt-2 text-xs font-semibold text-rose-600 dark:text-rose-300 truncate">{{this.error}}</div>
                {{else if this.load.isRunning}}
                    <div class="mt-3"><Spinner /></div>
                {{else}}
                    <div class="storefront-kpi-value storefront-animate-value mt-2 truncate">{{this.formattedValue}}</div>
                {{/if}}
            </div>
            <div class="storefront-kpi-icon flex items-center justify-center rounded-md">
                <FaIcon @icon={{@icon}} @prefix={{or @iconPrefix "fas"}} />
            </div>
        </div>

        <div class="mt-3 flex items-center justify-between gap-2 text-[11px]">
            <span class="text-gray-500 dark:text-gray-400 truncate">{{or @period "vs previous period"}}</span>
            <span class="storefront-kpi-delta storefront-animate-value inline-flex items-center gap-1 rounded-full px-2 py-0.5 font-semibold">
                <FaIcon @icon={{this.deltaIcon}} />
                {{this.deltaText}}
            </span>
        </div>
    </div>
</div>
