<script lang="ts">
  import { Link } from "svelte-navigator";
  import type { IFile, VaultInfo } from "upend/types";
  
  let infoData: VaultInfo | undefined;
  let latestFiles: IFile[] = [];

  fetch("/api/info").then(async (response) => {
    infoData = await response.json();
  });

  fetch("/api/files/latest").then(async (response) => {
    latestFiles = await response.json();
  });
</script>

<div class="home">
  <h1>
    Welcome to <em> "{infoData?.name || "UpEnd"}" </em>
  </h1>
  {#if latestFiles}
    <section class="latest">
      <h2>Most recently added files</h2>
      <ul>
        {#each latestFiles as file}
          <li>
            <div class="file-added">{file.added}</div>
            <Link to="/browse/{file.hash}">
              <div class="file-path">{file.path}</div>
            </Link>
          </li>
        {/each}
      </ul>
    </section>
  {/if}
</div>

<style lang="scss">
  h1 {
    text-align: center;
    font-weight: normal;
  }

    .latest {
      ul {
        list-style: none;
        padding: 0;
      }

      li {
        display: flex;

        & > * {
          margin: 0.1em 0.25em;
        }
      }

      .file-added {
        opacity: 0.77;
      }
    }
</style>
