@if (countdown$ | async; as countdown) {
	@if (!countdown.open) {
		<app-main-layout [showNavbar]="false" headerClass="py-1.5">
			<h1
				ngProjectAs="header"
				class="text-xl md:text-4xl xl:text-3xl"
				[innerHTML]="copy$ | async"></h1>
			<app-countdown
				[dateEvent]="countdown.countdown_unixtime"
				[initialTime]="countdown.server_unixtime"
				[enabled]="!countdown.open"
				(countdownDone)="refresh()" />
			<section class="grid sm:gap-4 md:grid-cols-2 lg:grid-cols-3">
				<div class="relative px-4 py-6 text-center lg:col-span-2">
					<h2 class="text-2xl font-bold lg:text-3xl">Únete a esta transmisión especial</h2>
					<p class="mb-4 text-xl">Conoce las mejores apuestas comerciales de:</p>
					<img class="mx-auto lg:w-3/4" src="assets/images/concepts.png" alt="concepts" />
					<p class="mt-4 text-lg font-medium">
						Todo listo para ofrecer los mejores productos <br />
						y servicios a todos nuestros clientes
					</p>
					<span
						class="absolute inset-y-12 -right-8 hidden w-1 bg-primary md:block lg:right-4"></span>
				</div>
				@if (hasTimes()) {
					<div class="px-4 py-6 text-dark">
						<app-session-times (hasTimes)="hasTimes.set($event)" />
					</div>
				}
			</section>
			<div class="flex flex-col items-center justify-center">
				<button
					appButton
					variant="ghost"
					class="underline underline-offset-4 transition-opacity hover:opacity-60"
					(click)="logout()">
					Cerrar sesión
				</button>
			</div>
		</app-main-layout>
	} @else {
		<main class="grid min-h-dvh grid-rows-[auto_1fr_auto_auto]">
			<div class="flex justify-center p-4">
				<img class="w-40" src="assets/images/logos/elektra-logo.png" alt="elektra" />
			</div>
			<div class="container mx-auto grid items-center p-4">
				@if (activity$ | async; as activity) {
					<app-vimeo-stream [srcStream]="activity.src_stream" />
				} @else {
					<h4 class="my-20 text-center text-2xl">Por el momento no hay evento disponible.</h4>
				}
			</div>
			<div class="flex flex-col items-center justify-center">
				<button
					appButton
					variant="ghost"
					class="underline underline-offset-4 transition-opacity hover:opacity-60"
					(click)="logout()">
					Cerrar sesión
				</button>
			</div>
			<app-footer />
		</main>
	}
}