<script lang="ts">
   import { onMount } from "svelte";

   import { Session } from "../../../api";
   export let sessionid: string;

   let session = new Session(sessionid, "");
   let members = session.members;

   onMount(() => {
      return () => {
         session.close();
      };
   });
</script>

<!-- {sessionid} -->

<div class="outer">
   <div class="members">
      {#each $members as member (member.$id)}
         <div class="member">
            <div class="name">{member.name || "anon"}</div>
            <div class="id">{member.$id}</div>
         </div>
      {/each}
   </div>
   <div class="content">Content</div>
</div>

<style>
   .outer {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;

      display: grid;
      grid-template-columns: 200px 1fr;
   }
</style>
