<div class="storefront-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 tracking-wide uppercase font-bold text-gray-700 dark:text-gray-400">{{t "storefront.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>