<div class="fleet-ops-widget fleet-ops-revenue-trend 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.revenue-trend.title"}}</span>
        <div class="flex gap-0.5">
            {{#each this.periods as |p|}}
                <button type="button"
                        class="text-[10px] px-1.5 py-0.5 rounded {{if (eq this.period p) 'bg-sky-600 text-white' 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-200'}}"
                        {{on "click" (fn this.setPeriod p)}}>
                    {{p}}
                </button>
            {{/each}}
        </div>
    </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">
        {{#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="flex items-baseline gap-2 mb-1.5">
                <span class="text-base font-bold text-black dark:text-gray-100 leading-none">
                    {{format-currency this.data.summary.total this.data.summary.currency}}
                </span>
                {{#if this.deltaStatus}}
                    <Badge @status={{this.deltaStatus}} @text={{this.deltaText}} @hideIcon={{true}} @disableHumanize={{true}} @wrapperClass="text-[9px] px-1 py-0" />
                {{/if}}
            </div>
            <div class="flex-1 min-h-0">
                <Chart @type="line" @labels={{this.data.labels}} @datasets={{this.chartDatasets}} @options={{this.chartOptions}} />
            </div>
        {{/if}}
    </div>
</div>
