<script lang="ts">
import { loading_finish, loading_start } from "lib/Loading";
import { get_endpoint } from "lib/NovaAPI";
import { onMount } from "svelte";
import { formatDate } from "util/Formatting";

interface Props {
	user_id?: string;
}

let { user_id = "" }: Props = $props();
let lists = $state([])

onMount(() => reload())

export const reload = async () => {
	loading_start()
	try {
		const req = await fetch(
			get_endpoint()+"/user/lists",
			{
				headers: {
					"Admin-User-Override": user_id,
				}
			}
		);
		if(req.status >= 400) {
			alert(await req.text())
			return
		}

		lists = (await req.json()).lists
	} catch (err) {
		alert(err);
	} finally {
		loading_finish()
	}
}
</script>

<div class="table_scroll">
	<table>
		<thead>
			<tr>
				<td></td>
				<td>Name</td>
				<td>Files</td>
				<td>Created</td>
			</tr>
		</thead>
		<tbody>
			{#each lists as list (list.id)}
				<tr>
					<td style="padding: 0; line-height: 1em;">
						<img src="{get_endpoint()}/list/{list.id}/thumbnail?height=48&width=48" alt="icon" class="thumbnail" />
					</td>
					<td>
						<a href="/l/{list.id}" target="_blank">{list.title}</a>
					</td>
					<td>
						{list.file_count}
					</td>
					<td>
						{formatDate(list.date_created, true, true, true)}
					</td>
				</tr>
			{/each}
		</tbody>
	</table>
</div>

<style>
.thumbnail {
	width: 48px;
	height: 48px;
}
</style>
