<div class="fleet-ops-key-metrics" ...attributes>
    <div class="flex flex-col">
        <div class="flex flex-row items-center justify-between px-4 py-2 border dark:border-gray-700 border-gray-200 dark:bg-gray-800 bg-gray-50 rounded-lg shadow-sm">
            <span class="text-base font-bold text-black dark:text-gray-100">{{t "fleet-ops.component.widget.key-metrics.title"}}</span>
        </div>

        <div class="mt-4">
            {{#if this.getDashboardMetrics.isRunning}}
                <Spinner />
            {{else}}
                <div class="grid grid-cols-2 lg:grid-cols-12 gap-4">
                    {{#each-in this.metrics as |title options|}}
                        <Widget::Count @title={{smart-humanize title}} @options={{options}} class="lg:col-span-2 h-full" />
                    {{/each-in}}
                </div>
            {{/if}}
        </div>
    </div>
</div>