<div class="fleet-ops-widget fleet-ops-maintenance-overview 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.maintenance-overview.title"}}</span>
        <FaIcon @icon="wrench" class="text-gray-400" />
    </div>

    <div class="flex-1 flex flex-col p-2.5 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 min-h-0">
        {{#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 if this.data}}
            <div class="grid grid-cols-3 gap-1.5 mb-2">
                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Overdue</div>
                    <div class="text-lg font-bold leading-tight mt-0.5 {{if this.data.overdue 'text-red-500' 'text-gray-400'}}">{{this.data.overdue}}</div>
                </div>
                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">Next 7d</div>
                    <div class="text-lg font-bold text-amber-500 leading-tight mt-0.5">{{this.data.scheduled_next_7d}}</div>
                </div>
                <div class="rounded-md border dark:border-gray-700 border-gray-200 p-1.5 text-center">
                    <div class="text-[9px] uppercase text-gray-500 dark:text-gray-400 leading-none">MTD</div>
                    <div class="text-sm font-bold text-black dark:text-gray-100 leading-tight mt-0.5 truncate">{{format-currency this.data.cost_this_month this.data.currency}}</div>
                </div>
            </div>

            <div class="flex-1 min-h-0 overflow-auto divide-y dark:divide-gray-700 border-t dark:border-gray-700 pt-1">
                {{#each this.data.upcoming as |item|}}
                    <div class="flex items-center justify-between py-1 hover:bg-gray-50 dark:hover:bg-gray-800 px-1">
                        <div class="min-w-0 flex-1">
                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate">{{or item.type "Maintenance"}}</div>
                            <div class="text-[10px] text-gray-500 dark:text-gray-400">{{format-date-fns item.scheduled_at "MMM d"}}</div>
                        </div>
                        {{#if item.priority}}
                            <Badge @status={{this.priorityStatus item.priority}} @text={{item.priority}} @hideIcon={{true}} @wrapperClass="text-[9px] px-1 py-0 ml-2" />
                        {{/if}}
                    </div>
                {{else}}
                    <div class="text-[10px] text-gray-500 text-center py-3">No upcoming maintenance.</div>
                {{/each}}
            </div>
        {{/if}}
    </div>
</div>
