<script setup>
  const route = useRoute()
  const user = useDirectusUser()

  const { logout } = useDirectusAuth()

  const signout = () => {
    logout()
    setTimeout(function () {
      window.location.reload()
    }, 1000)
  }
</script>

<template>
  <header>
    <div class="head">
      <NuxtLink class="logo" to="/">
        <span class="icon-tinysites"></span>
      </NuxtLink>
      <ul class="nav">
        <li><NuxtLink to="/" :class="route.path === '/' ? 'highlight' : ''">Overview</NuxtLink></li>
        <li><NuxtLink to="/showcase" :class="route.path === '/showcase' ? 'highlight' : ''">Showcase</NuxtLink></li>
        <li><NuxtLink to="/#pricing">Pricing</NuxtLink></li>
        <li><NuxtLink to="/docs/get-started" :class="route.path.substring(1).split('/')[0] === 'docs' ? 'highlight' : ''">Docs</NuxtLink></li>
      </ul>
      <ul class="cta" v-if="!user">
        <li class="pimary"><NuxtLink to="/site/">Get started <span>- it's free</span></NuxtLink></li>
        <li class="secondary"><NuxtLink to="/login">Sign in</NuxtLink></li>
      </ul>
      <ul class="cta" v-if="user">
        <li class="pimary"><NuxtLink to="/dashboard">Open dashboard</NuxtLink></li>
        <li class="secondary"><a @click="signout()">Sign out</a></li>
      </ul>
    </div>
  </header>
</template>