<script>
  import { onMount } from 'svelte';
  import Spinner from "$/client/components/Spinner.svelte";

  let tos_list = [];

  onMount(async () => {
    let res = await fetch(`/tos.json`, {credentials: 'same-origin'});
    tos_list = await res.json();
  });
</script>

{#each tos_list as section (section.metadata.id)}
  <callout>
  <b>TLDR:</b> "{@html section.metadata.summary}"
  </callout>
  <div>
    {@html section.content}
  </div>
{:else}
  <Spinner />
{/each}

<p style="font-size: 0.8em">These Terms of Service modified from <a href="https://tldrlegal.com/license/tldrlegal-terms-of-service#fulltext">TLDRLegal's TOS</a>, with permission and are licensed <a href="http://creativecommons.org/licenses/by/3.0/legalcode">CC-BY</a>.</p>
