@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-primary">
			<p>
				{{ dates | eventDates }}
			</p>
		</div>
	</header>
	@if (schedule$ | async; as schedule) {
		<app-date-tabs
			[dates]="dates"
			[selected]="selectedDate() + 1"
			(selectDate)="selectedDate.set($event - 1)" />
		<div
			class="hidden border-2 border-primary 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="grid border-b-2 border-b-primary text-center text-primary md:grid-cols-3 lg:grid-cols-5">
				<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>
		}
	}
}