<template>
  <div class="layout">
    <nav v-if="showNav">
      <span class="brand">SAC</span>
      <RouterLink to="/events">События</RouterLink>
      <RouterLink to="/problems">Проблемы</RouterLink>
      <RouterLink to="/hosts">Хосты</RouterLink>
      <button type="button" class="secondary" @click="logout">Выход</button>
    </nav>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { clearToken, getToken } from "./api";

const route = useRoute();
const router = useRouter();

const showNav = computed(() => route.path !== "/login" && !!getToken());

function logout() {
  clearToken();
  router.push("/login");
}
</script>
