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

    <div class="iam-kpi-footer">
        <span class="truncate">{{this.footnote}}</span>
    </div>
</div>
