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

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

<svelte:head>
    <title>Mangalord | Page tags</title>
</svelte:head>

{#if data.error}
    <p class="error" role="alert" data-testid="profile-page-tags-error">
        Couldn't load page tags: {data.error}
    </p>
{:else if !data.authenticated}
    <p class="hint" data-testid="profile-page-tags-signin">
        <a href="/login?next=/profile/page-tags">Sign in</a> to see your page tags.
    </p>
{:else}
    <PageTagsList initialItems={data.pageTags} initialDistinct={data.distinctPageTags} />
{/if}

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

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