<div class="developers-dashboard-widget developers-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="developers-kpi-label 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="developers-kpi-value mt-2 truncate">{{this.value}}</div>
                {{/if}}
            </div>
            <button type="button" class="developers-kpi-icon flex items-center justify-center rounded-md" {{on "click" this.refresh}} title={{t "developers.common.reload"}}>
                <FaIcon @icon={{@icon}} @prefix={{or @iconPrefix "fas"}} class={{if this.load.isRunning "animate-spin"}} />
            </button>
        </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 @footnote (t "developers.component.widget.dashboard.period")}}</span>
            <Badge @status={{this.deltaStatus}} @text={{this.deltaText}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="developers-kpi-delta text-[10px] px-2 py-0.5 font-bold" />
        </div>
    </div>
</div>
