<script>
  import { browser } from '$app/environment';
  import { store } from '$lib/v2/globalStore.svelte.js';
  import ListPage from '$lib/v2/snippets/ListPage.svelte';
  import { Button, Separator } from 'bits-ui';
  import IconPlugConnectedX from '~icons/tabler/plug-connected-x';

  let { data, form } = $props();

  store.pageTitle = 'My active sessions';

  $effect(() => {
    if (form?.success && browser) {
      window.location.reload();
    }
  });
</script>

<ListPage>
  <div class="flex flex-col gap-10 sm:mx-auto sm:w-4/5">
    {#each data.sessions as session}
      <div
        class="flex flex-col gap-5 w-full rounded-xl sm:rounded-2xl border border-neutral-600
          px-6 py-5 sm:px-10 sm:py-8 bg-neutral-950 shadow-xl text-neutral-500 text-sm text-justify"
      >
        <p>User-Agent: <span class="text-neutral-200 font-semibold">{session.userAgent}</span></p>
        <p>IP Address: <span class="text-neutral-200 font-semibold">{session.ip}</span></p>
        <Separator.Root class="bg-neutral-600 h-px w-full"></Separator.Root>
        <div class="flex items-center justify-end gap-5 text-xs sm:text-sm">
          <p>Don't recognize this?</p>
          <form method="POST" action="?/delete">
            <input type="hidden" name="id" value={session.publicId} />
            <Button.Root
              class="flex items-center justify-center gap-2 bg-neutral-100 text-neutral-950 rounded-full px-4 p-2
              border border-white cursor-pointer transition-all ease-in-out duration-300
              hover:scale-95 hover:bg-neutral-400"
            >
              End session
              <IconPlugConnectedX />
            </Button.Root>
          </form>
        </div>
      </div>
    {/each}
    <div class="h-10"></div>
  </div>
</ListPage>
