<template>
  <Toast style="width: 90vw" position="bottom-right" group="br" />
  <TheNavigation @logout="logout" />
  <div class="m-2">
    <router-view v-slot="{ Component }">
      <Transition mode="out-in">
        <component :is="Component" />
      </Transition>
    </router-view>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import TheNavigation from "@/components/UI/TheNavigation.vue";
import Toast from "primevue/toast";

export default defineComponent({
  name: "App",
  components: { TheNavigation, Toast },
  setup() {
    async function logout() {
      const response = await fetch("/auth/api/logout", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({}),
      });
      const result = await response.json();
      result.status === "OK" && window.location.reload();
    }
    return { logout };
  },
});
</script>

<style lang="less">
@import "primevue/resources/themes/saga-blue/theme.css";
@import "primevue/resources/themes/vela-blue/theme.css" screen and (prefers-color-scheme: dark);

@media (prefers-color-scheme: light) {
  img {
    content: url(@/assets/logos/logo.png);
  }
}
@media (prefers-color-scheme: dark) {
  img {
    content: url(@/assets/logos/logo_white.png);
  }
}

@font-face {
  font-family: "roboto";
  src: url(@/assets/fonts/roboto.ttf);
  font-display: swap;
}

.p-button.p-button-success:enabled:focus,
.p-button.p-button-danger:enabled:focus,
.p-button.p-button-success:enabled:active,
.p-button.p-button-danger:enabled:active {
  box-shadow: none !important;
}
body {
  margin: 0;
  padding: 0;
  background-color: var(--surface-b);
}
html,
body {
  font-size: 1.2em;
  font-family: "roboto", sans-serif;
}
.p-component {
  font-family: "roboto", sans-serif;
}
</style>

<style scoped>
.v-enter-active {
  transition: opacity 0.2s ease-in;
}
.v-leave-active {
  transition: opacity 0.1s ease-out;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
