<style>
  #release {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    overflow: hidden;
  }
  .loading .release-info {
    display: none;
  }
  .loading .release-loader {
    display: inline-block;
  }
  .release-loader {
    display: none;
    border: 2px solid var(--color-border-hint);
    border-top: 2px solid var(--color-border-default);
    border-right: 2px solid var(--color-border-default);
    border-radius: 50%;
    height: 1rem;
    width: 1rem;
    animation: spin 1s linear infinite;
  }
  #release-timestamp, #release-commit {
    color: var(--color-fg-dim);
  }
  .hidden {
    display: none !important;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

<blockquote id="release" class="hidden loading">
  💾
  <span class="release-loader"></span>
  <span>
    <a href="https://files.radicle.dev/releases/latest" id="release-info"></a>
    <span class="desktop dim">&middot; </span>
    <span id="release-commit" class="desktop"></span>
    <span id="release-timestamp" class="desktop"></span>
  </span>
</blockquote>

<script>
  const release = document.getElementById('release');
  release.classList.remove("hidden");

  fetch("https://files.radicle.dev/releases/latest/radicle.json")
    .then(res => res.json())
    .then(data => {
      const version = data.version;
      const commit = data.commit;
      const release = document.getElementById("release");
      const releaseInfo = document.getElementById("release-info");

      release.classList.remove("loading");
      releaseInfo.innerText = `Radicle ${version}`;
      document.getElementById("release-commit").innerText = commit;
      document.getElementById("release-timestamp").innerText = `(${new Date(data.timestamp * 1000).toUTCString()})`;
    });
</script>