<script lang="ts">
    import BookmarkList from '$lib/components/BookmarkList.svelte';
    import ListRowSkeleton from '$lib/components/ListRowSkeleton.svelte';

    let { data } = $props();
</script>

<h1>Bookmarks</h1>

{#await data.result}
    <ListRowSkeleton />
{:then r}
    {#if r.error}
        <p class="error" role="alert" data-testid="bookmarks-error">
            Couldn't load bookmarks: {r.error}
        </p>
    {:else if !r.authenticated}
        <p class="hint" data-testid="bookmarks-signin">
            <a href="/login">Sign in</a> to see your bookmarks.
        </p>
    {:else if r.bookmarks.length === 0}
        <p class="hint" data-testid="bookmarks-empty">No bookmarks yet.</p>
    {:else}
        <BookmarkList bookmarks={r.bookmarks} />
    {/if}
{/await}

<style>
    .error {
        color: var(--danger);
    }

    .hint {
        color: var(--text-muted);
    }
</style>
