<script lang="ts">
    import { page } from "$app/stores";
</script>

<div id="header-bar">
    <div id="logo-box">
        <a href="/">
            <img class="logo-img" src="/logo/logo-colour.svg" alt="FJLA Logo" width="50" height="50">
            <!--<img class="logo-img" id="logo-black" src="/logo/logo-black.svg" alt="FJLA Logo" width="50" height="50">
        --> </a>
    </div>
    {#if $page.data.session}
      <a class="account-link" href="/logout">Sign out</a>
    {/if}
</div>
<div id="spacer"></div>

<style>
    #header-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        background-color: darkslategrey;
        height: 60px;
    }

    #logo-box {
        padding: 5px;
        height: 50px;
    }

    .logo-img {
        position: absolute;
        left: 5px;
    }

    .account-link {
    position: absolute;
    right: 10px;
    top: 0px;
    height: 60px;
    width: 140px;
    color: white;
    background-color: darkslategrey;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-weight: 900;
    font-size: larger;
    text-decoration: none;
    text-align: center;
    border-radius: 0px;

    /* Flexbox styles for centering */
    display: flex;
    align-items: center;
    justify-content: center;
}


    .account-link:hover {
        background-color: rgb(54, 90, 90);
    }

    #spacer {
        height: 90px;
    }

</style>