<div class="fleet-ops-widget fleet-ops-top-drivers 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.top-drivers.title"}}</span>
        <div class="flex gap-0.5">
            {{#each this.sorts as |s|}}
                <button type="button"
                        class="text-[10px] px-1.5 py-0.5 rounded {{if (eq this.sortBy s.key) 'bg-sky-600 text-white' 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}}"
                        {{on "click" (fn this.setSort s.key)}}>
                    {{s.label}}
                </button>
            {{/each}}
        </div>
    </div>

    <div class="flex-1 border border-t-0 dark:border-gray-700 border-gray-200 rounded-b-md bg-white dark:bg-gray-900 overflow-auto">
        {{#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.rows.length}}
            <div class="divide-y dark:divide-gray-700">
                {{#each this.data.rows as |row index|}}
                    <div class="flex items-center gap-2 px-2 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-800">
                        <span class="text-[11px] font-bold text-gray-400 w-3 text-right">{{add index 1}}</span>
                        <div class="w-5 h-5 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[9px] font-semibold text-gray-600 dark:text-gray-300 flex-shrink-0">
                            {{first-char row.name}}
                        </div>
                        <div class="flex-1 min-w-0">
                            <div class="text-[11px] font-medium text-black dark:text-gray-100 truncate leading-tight">{{row.name}}</div>
                            <div class="text-[10px] text-gray-500 dark:text-gray-400 truncate leading-tight">
                                {{row.orders_completed}} orders &middot; {{format-meters row.distance_m}}
                            </div>
                        </div>
                        {{#if row.on_time_pct}}
                            <Badge @status={{this.onTimeStatus row.on_time_pct}} @text={{concat row.on_time_pct "%"}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
                        {{/if}}
                    </div>
                {{/each}}
            </div>
        {{else}}
            <div class="flex items-center justify-center h-full text-[10px] text-gray-500">No driver activity in this period.</div>
        {{/if}}
    </div>
</div>
