<script lang="ts">
  export let login: string;
  export let page: string;
</script>

<div class="col-12 col-md-4">
  <div class="row d-none d-md-block">
    <div class="col text-center">
      <img alt={login} class="profile-picture border mb-5" src="/identicon/{login}" />
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="list-group" id="list-tab" role="tablist">
        <a
          class="list-group-item list-group-item-action{page == '/settings' ? ' active' : ''}"
          id="list-repos-list"
          href="/settings"
          role="tab"
          aria-controls="repositories">Repositories</a>
        <a
          class="list-group-item list-group-item-action{page == '/ssh' ? ' active' : ''}"
          id="list-ssh-list"
          href="/settings/ssh"
          role="tab"
          aria-controls="SSH">SSH</a>
        <a
          class="list-group-item list-group-item-action{page == '/settings/account'
            ? ' active'
            : ''}"
          id="list-account"
          href="/settings/account"
          role="tab"
          aria-controls="account">Account</a>
      </div>
    </div>
  </div>
</div>

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