@if (showHeader()) {
	<h3 class="mb-2 text-center text-xl font-semibold text-secondary">
		{{ dateEvent() | unixTime: "dd 'de' MMMM y 'a las' HH:mm" }}
	</h3>
	<h3 class="text-center text-xl font-semibold uppercase tracking-wider text-secondary">
		Nuestro evento comienza en...
	</h3>
}
@if (countdown$ | async; as countdown) {
	<div class="grid gap-2 sm:grid-cols-2 md:grid-cols-4">
		@for (unit of countdown; track $index) {
			<div class="flex flex-col items-center gap-1 font-bold text-white">
				<span class="grid place-content-center text-5xl">
					{{ unit.value | number: '2.0-0' }}
				</span>
				<span class="text-center text-2xl uppercase">{{ unit.label }}</span>
			</div>
		}
	</div>
}