@if (schedule$ | async; as schedule) {
	@if (schedule.length > 0) {
		<section id="schedule" class="container mx-auto px-4 py-12">
			<header class="mb-12 flex items-center gap-4">
				<img class="w-16" src="assets/images/icons/schedule.png" alt="Calendar" />
				<p class="font-alternate mb-1 font-bold">
					{{ schedule[0].start_unixtime | unixTime: "dd 'de' MMMM 'de' yyyy" }}
				</p>
			</header>
			<div
				class="hidden rounded-t border-2 border-b-0 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) {
				<div class="grid border-t-2 border-primary text-center md:grid-cols-3 lg:grid-cols-5">
					<span class="p-2">
						{{ activity.start_unixtime | unixTime: 'HH:mm' }}
					</span>
					<span class="p-2 md:text-left lg:col-span-2" [innerHtml]="activity.text"></span>
					<span
						class="p-2 font-bold md:text-left lg:col-span-2"
						[innerHtml]="activity.speaker"></span>
				</div>
			}
		</section>
	}
}