@if (showSkeleton) {
	<ngx-skeleton [variant]="variant" [rows]="skeletonRows"></ngx-skeleton>
}
<!--
	Deliberately toggled with a class rather than wrapped in the `@else` above:
	`<ng-content>` inside an embedded view is projected once, so call sites that
	pass a `[message]` template (daily timesheet, help center) would lose it the
	moment the branch swapped. Keeping the card in the DOM and hiding it costs
	nothing and keeps projection stable.
-->
<nb-card class="p-0 no-data-found" [class.is-hidden]="showSkeleton">
	<nb-card-body>
		<div class="row align-items-center h-100">
			<div class="col-12">
				<div class="text-center d-flex justify-content-center py-3">
					<nb-icon icon="bar-chart-2-outline" class="no-record-icon"></nb-icon>
				</div>
				<h5 class="text-center m-0">
					{{ title }}
				</h5>
				<p class="text-center">
					{{ message }}
					<ng-content select="[message]"></ng-content>
				</p>
			</div>
		</div>
	</nb-card-body>
</nb-card>