<script>
	import Pair from "./Pair.svelte";
	export let rasp_data = [];
	export let is_rasp_data_loading = false;
	export let is_rasp_cache_loaded = false;
	export let is_rasp_data_loaded = false;
</script>

{#each rasp_data as day, i}
	<div id={`${i}`} class="p-2 min-w-[300px] snap-center">
		<div
			class="flex p-2 mb-2
								border-[1px] border-[var(--w-border)] dark:border-[var(--b-border)]
								text-[var(--w-text)] dark:text-[var(--b-text)]
								{day.isCurrentDate === 1 ? 'bg-[var(--w-red)] dark:bg-[var(--b-red)]' : ''}"
		>
			<h1>
				<pre>{day.date} - {day.weekDay}</pre>
			</h1>
		</div>
		<div class="relative z-0 h-[calc(100svh-192px)]">
			<div
				class="h-full w-full z-0 absolute overflow-y-auto overflow-x-hidden
									flex flex-col justify-start items-center
									"
			>
				{#if day.pairs.every((p) => p.schedulePairs.length === 0)}
					<div
						class="w-full p-2
											border-[1px] rounded-[8px] border-[var(--w-border)] dark:border-[var(--b-border)]
											"
					>
						{#if !is_rasp_data_loading && !is_rasp_cache_loaded && !is_rasp_data_loaded}
							Ошибка получения данных попробуйте позже
						{:else if is_rasp_data_loading}
							Загрузка ....
						{:else if is_rasp_data_loaded || is_rasp_cache_loaded}
							have a good day
						{/if}
					</div>
				{:else}
					{#each day.pairs as pairs}
						<Pair {pairs}></Pair>
					{/each}
				{/if}
			</div>
		</div>
	</div>
{/each}
