<script lang="ts">
  import { page } from '$app/state';
  import { checkScope } from '$lib/auth';
  import type { Session } from '../../hooks.server';
  let session = $derived(page.data.session as Session);
</script>

<svelte:head>
  <title>Crunched - Home</title>
</svelte:head>

<article>
  <h2 class="text-2xl">Home</h2>
  <div>
    {#if session}
      <div>
        <small>Signed in as</small><br />
        <strong>{session.userInfo.preferred_username ?? 'User'}</strong>
      </div>
      <div>
        <small>Scope</small><br />
        <strong>{session.tokens.scope}</strong>
      </div>
      <button
        onclick={() => {
          alert(checkScope(session, ['vm-own-rm'], true));
        }}>need scope</button
      >
      <!-- <div slot="submitButton" class="buttonPrimary">Sign out</div> -->
    {:else}
      <span class="notSignedInText">You are not signed in</span>
    {/if}
  </div>
</article>
