<script>
  import { _ } from "$lib/locale.js";
  import { date, date_from_ts } from "$lib/util.js";
  import api from "$lib/api.js";

  import { onMount } from "svelte";

  let data = $state(null);

  onMount(async () => {
    data = await api.metrics(fetch);
  });
</script>

<footer>
  <ul>
    <li>
      <a href={import.meta.env.WEBSITE_SOURCE_URL}>{$_("footer.source")}</a>
    </li>
    <li>
      <a href="/doc/license">{$_("footer.license")}</a>
    </li>
    <li>
      <a href="/doc/privacy">{$_("footer.privacy")}</a>
    </li>
  </ul>
  {#if data === null}
    <span>
      {$_("footer.render", {
        time: date(new Date()),
      })}
    </span>
  {:else}
    <span>
      {$_("footer.number", {
        total: data.total,
        since: date_from_ts(data.since),
      })}
      {#if data.total % 1000 === 0}
        <span class="wow">({$_("footer.wow")})</span>
      {/if}
    </span>
  {/if}
</footer>

<style>
  footer {
    background: var(--glass);
    border-top: solid 2px var(--color);

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    box-sizing: border-box;
    padding: 15px 40px;
  }

  footer ul {
    list-style: none;

    display: flex;
    flex-direction: row;
    gap: 5px;

    font-size: var(--size-2);
    text-align: left;
  }

  footer ul li a {
    text-decoration: none;
    font-weight: 200;
  }

  footer ul li a:hover {
    color: var(--color);
  }

  footer ul li:not(:last-of-type)::after {
    content: " / ";
    color: var(--white-3);
    font-weight: 900;
  }

  footer span {
    color: var(--white-2);
    font-size: 15px;
  }

  footer .wow {
    color: var(--color);
  }
</style>
