<script lang="ts">
  import { links, Router } from "svelte-routing";
  import { authStore, login, logout } from "../stores/authstore";
  import { base } from "../stores/basestore";
  import { PATHS } from "../config/paths";
</script>

<header class="no-print">
  <aside use:links>
    {#if $authStore.loggedIn}
      <Router>
        <ul>
          <li><a href="{$base}{PATHS.WELKOM}">WELKOM</a></li>
          <li><a href="{$base}{PATHS.BEKIJKEN}">MIJN MEDISCH DOSSIER BEKIJKEN</a></li>
          <li><a href="#uitloggen" on:click={logout}><span>{$authStore.username}</span> UITLOGGEN</a></li>
        </ul>
      </Router>
    {:else}
      <button on:click={login}>Inloggen</button><br />
      <small><a href="#registeren">Inschrijven als nieuwe patiëntgebruiker</a></small>
    {/if}
  </aside>
</header>

<style lang="scss">
  header {
    display: flex;
    background-image: url("../assets/background-bron-pgo.png");
    background-size: cover;
    background-position: left;
    width: 740px;
    height: 740px;
    border-bottom:#128bcc 8px solid;

    aside {
      margin: 580px 0 0 370px;

      button {
        cursor: pointer;
        font-size: 1.5rem;
        padding: 1rem 2rem;
        margin-bottom: 1rem;
        border: 2px double lightblue;
        border-radius: 1px;
        background: none;
        color: #33a0d9;
        transition:
          background-color 0.3s,
          color 0.3s;

        &:hover {
          background-color: lightblue;
          color: #128bcc;
        }
      }

      ul {
        padding: 0 10px 0 0;
        margin: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: center;
        gap: 0.5rem;
        border-right: 8px double #abe2ff;

        li {
          font-size: 0.8rem;
          white-space: nowrap;
          list-style: none;
          margin: 0 0 0.3rem 0;
          padding: 0;
        }
      }

      a {
        color: #7a8991;
        text-decoration: none;
        margin-top: 1rem;

        &:hover {
          color: #33a0d9;
          text-decoration: underline;
        }

        span {
          color: #33a0d9;
        }
      }
    }
  }
</style>
