@if (error()) {
	<div class="counter-error" role="alert">
		<div class="counter-error-text">
			<nb-icon icon="alert-triangle-outline" status="danger"></nb-icon>
			<!-- See `teams-widget-state`: `title` alone reaches neither screen
				readers nor touch users, so the detail goes in `aria-label`. -->
			<span
				class="counter-error-label"
				[title]="error()"
				[attr.aria-label]="('DASHBOARD_PAGE.BUILDER.WIDGETS.ERROR' | translate) + ': ' + error()"
			>
				{{ 'DASHBOARD_PAGE.BUILDER.WIDGETS.ERROR' | translate }}
			</span>
		</div>
		<button nbButton ghost size="tiny" status="basic" type="button" (click)="retry.emit()">
			{{ 'DASHBOARD_PAGE.BUILDER.WIDGETS.RETRY' | translate }}
		</button>
	</div>
} @else if (loading()) {
	<!-- <output> carries an implicit `status` live region, so no explicit role. -->
	<output
		class="counter-skeleton"
		aria-busy="true"
		[attr.aria-label]="'DASHBOARD_PAGE.BUILDER.WIDGETS.LOADING' | translate"
	>
		<!-- `span`, not `div`: `<output>` only accepts phrasing content. -->
		<span class="skeleton-line skeleton-value"></span>
		<span class="skeleton-line skeleton-strip"></span>
	</output>
} @else {
	<div class="counter-headline">
		<div class="h1 counter-value">{{ value() }}</div>
		@if (suffix(); as suffixText) {
			<div class="counter-suffix">{{ suffixText }}</div>
		}
	</div>

	<div class="counter-container">
		<gauzy-counter-point
			[total]="total()"
			[value]="counterValue()"
			[color]="color()"
			[progress]="progress()"
		></gauzy-counter-point>
	</div>

	@if (captionKey(); as caption) {
		<div class="counter-caption">{{ caption | translate }}</div>
	}
}