<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<svelte:head>
  <title>{data.user}</title>
</svelte:head>

<div class="flex gap-5">
  <div class="flex flex-col m-3 items-center">
    <div class="my-5">
      <img
        class="profile-picture"
        src="/identicon/{data.user}"
        alt="Profile picture of {data.user}" />
    </div>
    <h3>{data.user}</h3>
  </div>
  <div class="flex flex-col p-5">
    <h1>Repositories</h1>
    {#if Object.keys(data.repos).length}
      <ul class="mt-5">
        {#each Object.keys(data.repos) as repo}
          <li class="mt-2">
            <a class="link" href="/{data.user}/{repo}">
              {repo}
            </a>
    <span class="ms-2 icon-[tdesign--git-repository-private]"></span>
            {#if data.repos[repo].private}
    <span class="ms-2 icon-[tdesign--git-repository-private]"></span>
            {/if}
          </li>
        {/each}
      </ul>
    {:else}
      {data.user} has not created any public repository yet
    {/if}
  </div>
</div>

<style>
  img.profile-picture {
    background-color: white;
    object-fit: cover;
    width: 100%;
    max-width: 150px;
    border-radius: 50%;
    border: 1px solid #bbb;
    margin: 0 auto;
    padding: 0;
  }
</style>