<script lang="ts">
    import Button from '../dashboard/elements/Button.svelte';
    import UserPanel from '../bio/UserPanel.svelte';
  
    export let username: string | undefined = undefined;
  </script>
  
  <div class="flex flex-col justify-between gap-8 h-full">
    <div class="h-[72px] flex-col justify-center items-center gap-4 inline-flex text-center text-text-primary">
      <p class="text-2xl font-semibold">404</p>
      <p>Sorry, we couldn't find that page.</p>
    </div>
    <div class="w-[350px] sm:w-[400px]">
      <UserPanel
        displayName="Potentially You"
        username={username ?? 'you'}
        badges={['VERIFIED']}
        description="We couldn't find this page. Maybe it doesn't exist, or it used to, but got deleted. Sorry!"
        socials={{ links: [], texts: [], minimal: false, invert: false }}
        uid={-1}
        uniqueId={'0'}
        views={null}
        align={'LEFT'}>
        <div class="flex flex-col gap-2">
          {#if username}
            <Button
              large={true}
              onClick={() => (window.location.href = `/dashboard/register?un=${username}`)}
              style="white">Claim this page</Button>
          {/if}
          <Button large={true} onClick={() => (window.location.href = '/')}>Return</Button>
        </div>
      </UserPanel>
    </div>
    <div class="h-[72px]" />
  </div>
  