<script lang="ts">
    let { data } = $props();
    const authenticated = $derived(data.authenticated);
    const bookmarks = $derived(data.bookmarks);
</script>

<svelte:head>
    <title>Bookmarks — Mangalord</title>
</svelte:head>

<h1>Bookmarks</h1>

{#if !authenticated}
    <p data-testid="bookmarks-signin">
        <a href="/login">Sign in</a> to see your bookmarks.
    </p>
{:else if bookmarks.length === 0}
    <p data-testid="bookmarks-empty">No bookmarks yet.</p>
{:else}
    <ul class="bookmark-list" data-testid="bookmark-list">
        {#each bookmarks as b (b.id)}
            <li>
                {#if b.chapter_id && b.chapter_number != null}
                    <a href="/manga/{b.manga_id}/chapter/{b.chapter_number}">
                        Chapter {b.chapter_number}
                        {#if b.page != null && b.page > 0}— page {b.page}{/if}
                    </a>
                {:else if b.chapter_id}
                    <!-- Chapter bookmark whose chapter was deleted; fall
                         back to the manga overview rather than emit a
                         broken link to a number we don't have. -->
                    <a href="/manga/{b.manga_id}">Chapter bookmark (chapter removed)</a>
                {:else}
                    <a href="/manga/{b.manga_id}">Manga bookmark</a>
                {/if}
                <span class="created">{new Date(b.created_at).toLocaleDateString()}</span>
            </li>
        {/each}
    </ul>
{/if}

<style>
    .bookmark-list {
        list-style: none;
        padding: 0;
    }
    .bookmark-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }
    .created {
        color: #888;
        margin-left: 0.5rem;
    }
</style>
