@if (dates$ | async; as dates) {
	<header class="mb-12 flex items-center gap-4">
		<img class="w-16" src="assets/images/icons/schedule.png" alt="Calendar" />
		<div class="font-bold text-secondary">
			<p class="mb-1">
				{{ dates | eventDates }}
			</p>
			<p>1er Foro de Suplementación</p>
		</div>
	</header>
	@if (schedule$ | async; as schedule) {
		<div class="hidden text-center font-bold md:grid md:grid-cols-3 lg:grid-cols-5">
			<span class="p-2">Hora</span>
			<span class="p-2 md:text-left lg:col-span-2">Tema</span>
			<span class="p-2 md:text-left lg:col-span-2">Ponente</span>
		</div>
		@for (activity of schedule; track activity; let i = $index) {
			<div
				class="mb-4 grid rounded-3xl text-center text-white md:grid-cols-3 lg:grid-cols-5"
				[class.bg-primary]="i % 2 === 0"
				[class.bg-secondary]="i % 2 !== 0">
				<span class="p-2">
					{{ activity.is_title !== 1 ? (activity.start_unixtime | unixTime: 'HH:mm') : '' }}
				</span>
				<span
					class="p-2 md:text-left lg:col-span-2"
					[class.font-semibold]="activity.is_title"
					[innerHtml]="activity.text">
				</span>
				<span class="p-2 md:text-left lg:col-span-2" [innerHtml]="activity.speaker"></span>
			</div>
		}
	}
}