@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/calendar.png" alt="Calendar" />
			<p class="font-alternate mb-1 font-bold">
				{{ schedule()[0].start_unixtime | unixTime: "EEEE dd 'de' MMMM" }}
			</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>
}