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

  <header class:loggedin={$authStore.loggedIn}>
    {#if $authStore.loggedIn}
      <div class="login-text">
        <span>Ingelogd als</span>
        <p>{$authStore.username}</p>
      </div>
      <button class="login-btn logout-btn" on:click={logout} >Uitloggen van Doel PGO</button>
    {:else}
      <div class="login-text">
        <span></span><b>Welkom! </b> Log in op Doel PGO.<span></span>
        <p>{$authStore.username}</p>
      </div>
      <button class="login-btn" on:click={login} ><b>Inloggen</b> op Doel PGO</button>
    {/if}
  </header>

  <aside use:links>
    <Router>
      <ul>
        <li><a href="{$base}{PATHS.WELKOM}">Welkom</a></li>
        <li><a href="{$base}{PATHS.BEKIJKEN}" class:hidden={!$authStore.loggedIn}>Patiëntdossier</a></li>
      </ul>
    </Router>
  </aside>

<style lang="scss">
  header {
    width: 1000px;
    height: 417px;
    background: url(../assets/background-doel-pgo.png) no-repeat;
    position: relative;
    filter: grayscale(1);

    &.loggedin {
      filter: none;
    }

    .login-text {
      position: absolute;
      top: 200px;
      left: 40px;

      span {
        color: grey;       
      }

      p {
        max-width: 230px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: orangered;
      }
    }

    .login-btn {
      position: absolute;
      top: 330px;
      left: 50px;
      background-color: #ef5800;
      color: #ffffff;
      font-size: 16px;
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background-color 0.3s ease;

      &:hover {
        background-color: #874800;
      }
    }

    .logout-btn {
      background-color: #cecece;
      color: #3f3f3f;
      
      &:hover {
        background-color: #ef5800;
        color: #ffffff;
      }
    }
  }

  aside {
    width: 1000px;
    position: absolute;
    right: 5rem;
    // text-align: right;
    margin-top: 1rem;
    transform: translateY(-50%);
    display: flex;
    justify-content: flex-end;

    ul {
      display: flex;
      flex-direction: row;
      list-style: none;
      padding: 0;
      margin: 0;

      li {
        margin-right: 20px;

        &:last-child {
          margin-right: 0;
        }

        a {
          text-decoration: none;
          color: #ef5800;
          font-size: 16px;
          transition: color 0.3s ease;

          &:hover {
            color: #874800;
          }

          &.hidden {
            display: none;
          }
        }

      }
    }

  }

</style>