<script>
	import '$lib/css/base.css';
	import '$lib/css/article.css';

	import { onMount } from 'svelte';
	import { load } from '$lib/js/apicall.js';

	import CarouselVertical from '$lib/components/carousel-vertical.svelte';

	$: isLoaded = false;
	$: hasLoadFailed = false;
	let post_min; // slug, author, title, date

	onMount(async () => {
		const loaded_post = await load("get_simple_posts/4");
		if (loaded_post.status == 200) {
			post_min = loaded_post.data;
			isLoaded = true;
		} else hasLoadFailed = true;
	});
</script>

<div>
	<h1>Etheryo Blog</h1>
	{#if isLoaded}
		<CarouselVertical posts={post_min} />
		<!-- debug purpose -->
		<div style="height: 100rem;"></div>
	{:else if hasLoadFailed}
		<p>Loading failed :c</p>
	{:else}
		<p>Loading...</p>
	{/if}
</div>
