<script>
	import { fetcher, request, listPhotos } from './http.js';
	import Gallery from './Gallery.svelte';

	async function getMetadataTitle() {
		const resp = await fetcher(request('GET', 'metadata/title'));
		return resp.text();
	}
	let title = getMetadataTitle();

	async function getPhotos() {
		const resp = await fetcher(request('GET', listPhotos(10000)));
		const text = await resp.text();

		const xml = new window.DOMParser().parseFromString(text, "text/xml");
		const contents = xml.querySelectorAll('ListBucketResult > Contents');
		
		const photos = [];
		contents.forEach(c => {
			photos.push(c.querySelector('Key').innerHTML);
		});
		return photos;
	}
	let photos = getPhotos();
</script>

<svelte:head>
	{#await title then title}
		<title>{title}</title>
	{:catch error}
		<title>Error</title>
	{/await}
</svelte:head>

<div>
	<nav>
		<ul>
			<li><a href="..">Gallery</a></li>
		</ul>
	</nav>

	<header>
		{#await title}
			<h1 class="dim">Loading...</h1>
		{:then title}
			<h1>{title}</h1>
		{:catch error}
			<h1 class="dim" title="{error}">Error getting title</h1>
		{/await}
	</header>

	{#await photos then photos}
		<Gallery {photos} />
	{:catch error}
		<main>Unable to load photos: {error}</main>
	{/await}
</div>

<!-- vim: set ft=html: -->
