<script lang="ts">
	import Cover from './Cover.svelte';
	import { fetchApps } from './apps';
	import type { App } from './apps';

	interface AppsResponse {
		apps: Record<string, App[]>;
	}

	let appsPromise: Promise<AppsResponse>;

	appsPromise = fetchApps();
</script>

{#await appsPromise}
	<p>Loading...</p>
{:then resp}
	<div class="apps-container">
		{#each Object.entries(resp.apps) as [server_name, apps]}
			{#each apps as app, tab_index}
				<Cover {app} {server_name} {tab_index}></Cover>
			{/each}
		{/each}
	</div>
{:catch error}
	<p>Error: {error.message}</p>
{/await}

<style>
	.apps-container {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		padding: 20px 0;
	}
</style>
