<svelte:options runes />

<script lang="ts">
  import { browser } from "$app/environment";
  import { canaries } from "./canaries";
  import Canary from "./Canary.svelte";
  import { initKeystore } from "./keystore";
</script>

<svelte:head>
  <title>Warrant Canaries - mem.estrogen.zone</title>
</svelte:head>

<div class="flex min-h-full min-w-full flex-col justify-between">
  <div>
    {#if !browser}
      <noscript class="text-white min-w-full min-h-full">
        You're using noscript; here are the raw canaries:<br />
        <ul>
          {#each canaries as canary}
            <li class="list-disc ml-4">
              {canary.signer}'s canary for {canary.name} (<a
                href={canary.upstream ?? canary.url}
                target="_blank"
                download="{canary.signer}:{canary.name}.sig"
                class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
                >download</a
              >,
              <a
                href={canary.upstream ?? canary.url}
                target="_blank"
                class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
                >open in newtab</a
              >)
            </li>
          {/each}
        </ul>
        {@html `<style>.hidden-if-noscript{display:none !important;}</stylew>`}
      </noscript>
    {/if}
    {#await initKeystore}
      <div class="hidden-if-noscript">
        {#if browser}
          Preparing...
        {:else}
          Awaiting Browser
        {/if}
      </div>
    {:then _}
      <div class="canaries flex gap-4 flex-wrap max-w-full">
        {#each canaries as canary}
          <Canary {canary} />
        {/each}
      </div>
    {:catch e}
      <div class="p-4 bg-red-700 text-white max-w-full overflow-x-auto">
        Encoutnered Error:
        <pre>{JSON.stringify(
            {
              raw: e,
              fileName: "fileName" in e ? e.fileName : undefined,
              name: "name" in e ? e.name : undefined,
              message: "message" in e ? e.message : undefined,
              stack: "stack" in e ? e.stack : undefined,
            },
            null,
            2,
          )}</pre>
      </div>
    {/await}
  </div>

  <div
    class="mt-3 sticky bottom-0 block bg-black bg-opacity-30 p-4 rounded-xl backdrop-blur-xl"
  >
    <p class="text-xs text-white">
      <span class="about opacity-60 hover:opacity-80 transition-all">
        This page contains various <a
          href="https://en.wikipedia.org/wiki/Warrant_canary"
          target="_blank"
          rel="noopener noreferrer"
          class="opacity-90 hover:underline text-blue-400 hover:text-blue-300"
          >liberty canaries</a
        >
        that I, or my friends, depend upon or are otherwise interested in.
      </span>
      <span
        class="validation-attempt opacity-60 hover:opacity-80 transition-all"
        class:hidden={!browser}
      >
        <br />
        It makes an attempt to validate their signatures, however it does not attempt
        to check if they've been updated in time for their next scheduled update.
        It is your responsibility to ensure that the canary's contents match your
        requirements.
      </span>
      <span
        class="trust-server opacity-60 hover:opacity-80 transition-all"
        class:hidden={!browser}
      >
        <br />
        The server at
        <code class="font-grub px-1 bg-white bg-opacity-5 rounded-md"
          >{#if typeof location !== "undefined"}{location.host ??
              location.hostname}{:else}mem.estrogen.zone{/if}</code
        >
        serves the keys and the canaries. Make sure you trust it to serve correct
        keys and canaries, or validate the signatures of the
        <code class="font-grub px-1 bg-white bg-opacity-5 rounded-md"
          >Signed</code
        > links with keys obtained externally.
      </span>
      <span
        class="legend opacity-60 hover:opacity-80 transition-all"
        class:hidden={!browser}
        ><br />If a signature check passes, the background of the respective
        canary turns
        <span class="bg-white text-black">white</span>. Whilst fetching, it's
        background turns <span class="bg-blue-500 text-white">blue</span>. If a
        signature check fails, it will turn
        <span class="bg-red-500 text-white">red</span>. If the canary cannot be
        found, it turns a different shade of
        <span class="bg-red-800 text-white">red</span>.</span
      >
      {#if canaries.find((v) => v.upstream)}
        <span
          class="upstream-btn opacity-60 hover:opacity-80 transition-all"
          class:hidden={!browser}
          ><br />
          If there is an upstream button, it indicates that we are mirroring the
          canary, rather than using the source canary, e.g. for CORS. You may want
          to check it in the event of something looking wrong.</span
        >
      {/if}
    </p>
  </div>
</div>