<div class="fleet-ops-widget fleet-ops-operations-pulse flex flex-col h-full {{@class}}" ...attributes>
    <div class="flex items-center justify-between px-3 py-1.5 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-t-md shadow-sm">
        <span class="text-xs font-bold text-black dark:text-gray-100">
            {{t "widget.operations-pulse.title"}}
        </span>
        <button type="button" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-[10px]" {{on "click" this.refresh}} title={{t "widget.refresh"}}>
            <FaIcon @icon="rotate" class={{if this.load.isRunning "animate-spin"}} />
        </button>
    </div>

    <div class="flex-1 p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900">
        {{#if this.load.isRunning}}
            <div class="flex items-center justify-center h-full">
                <Spinner />
            </div>
        {{else if this.error}}
            <div class="flex items-center justify-center h-full text-xs text-red-500">{{this.error}}</div>
        {{else}}
            <div class="grid grid-cols-2 lg:grid-cols-5 gap-2 h-full">
                {{#each this.tiles as |tile|}}
                    <div class="fleet-ops-pulse-tile {{tile.meta.accent}} relative rounded-md border p-2 flex flex-col justify-between min-h-0 overflow-hidden">
                        {{!-- Accent stripe along the left edge for instant status read --}}
                        <span class="fleet-ops-pulse-stripe absolute inset-y-0 left-0"></span>

                        <div class="flex items-center justify-between relative z-10">
                            <span class="text-[9px] uppercase tracking-wider text-gray-600 dark:text-gray-300 font-bold truncate">{{tile.title}}</span>
                            {{#if tile.meta.icon}}
                                <div class="fleet-ops-pulse-icon flex-shrink-0">
                                    <FaIcon @icon={{tile.meta.icon}} class="text-[10px]" />
                                </div>
                            {{/if}}
                        </div>

                        <div class="flex items-baseline gap-1 mt-1 relative z-10 fleet-ops-pulse-value-row">
                            <span class="fleet-ops-pulse-value text-2xl font-bold leading-none tabular-nums">{{tile.value}}</span>
                            {{#if tile.of}}
                                <span class="text-[10px] text-gray-500 dark:text-gray-400">/ {{tile.of}}</span>
                            {{/if}}
                        </div>

                        {{#let (this.deltaStatus tile) as |status|}}
                            {{#if status}}
                                <Badge @status={{status}} @text={{this.deltaText tile}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] py-0 px-1 leading-tight mt-1 self-start font-bold relative z-10" />
                            {{/if}}
                        {{/let}}
                    </div>
                {{/each}}
            </div>
        {{/if}}
    </div>
</div>
