<script lang="ts">
  import { page } from '$app/state';
  import type { LayoutProps } from './$types';
  let { data, children }: LayoutProps = $props();
</script>

<div class="p-3 flex flex-col gap-5 items-center">
  <img alt={data.login} class="my-5 profile-picture border" src="/identicon/{data.login}" />
  <div class="tabs tabs-border" id="list-tab" role="tablist">
    <a
      class="tab{page.url.pathname == '/settings' ? ' tab-active' : ''}"
      id="list-repos-list"
      href="/settings"
      role="tab"
      aria-controls="repositories">Repositories</a>
    <a
      class="tab{page.url.pathname == '/settings/ssh' ? ' tab-active' : ''}"
      id="list-ssh-list"
      href="/settings/ssh"
      role="tab"
      aria-controls="SSH">SSH</a>
    <a
      class="tab{page.url.pathname == '/settings/account' ? ' tab-active' : ''}"
      id="list-account"
      href="/settings/account"
      role="tab"
      aria-controls="account">Account</a>
  </div>
</div>
<div class="col p-3">
  <div role="tabpanel" id="nav-tabContent">
    <div class="active" role="tabpanel" aria-labelledby="list-repos-list">
      {@render children()}
    </div>
  </div>
</div>

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