<!-- Default App.vue file-->
<template>
  <v-app>
    <v-app-bar app rounded color="white">
      <v-toolbar-title
        style="max-width: 400px"
        class="d-flex justify-space-around"
      >
        <router-link
          to="/"
          style="text-decoration: none; color: black; cursor: pointer"
        >
          <img src="./assets/BUT_logo.png" alt="BUT logo"
               class="but-logo">
        </router-link>
      </v-toolbar-title>
      <div class="vertical-line"></div>
      <!-- Links in the top with titles and URLs, including styles-->
      <v-tabs align-with-title>
        <v-tab
          to="/app"
          style="text-decoration: none; color: darkcyan; cursor: pointer"
        >
          Mapování infrastruktury</v-tab
        >
        <v-tab
            to="/navod"
            style="text-decoration: none; color: darkgoldenrod; cursor: pointer"
        >
          Návod</v-tab
        >
        <v-tab
            to="/les"
            style="text-decoration: none; color: purple; cursor: pointer"
        >
          Zdroje logů</v-tab
        >
        <v-tab
            to="/rules"
            style="text-decoration: none; color: purple; cursor: pointer"
        >
          Korelační pravidla</v-tab
        >
        <v-tab
            to="/navod"
            style="text-decoration: none; color: darkgoldenrod; cursor: pointer"
        >
          ?</v-tab
        >
      </v-tabs>
    </v-app-bar>
    <v-main>
      <v-container fluid>
        <router-view></router-view>
      </v-container>
    </v-main>

    <v-footer app>
    </v-footer>
  </v-app>
</template>

<!-- Title -->
<script lang="ts" setup>
</script>

<!-- Default, auto generated style-->
<style>
div.vertical-line {
  width: 1px; /* Line width */
  background-color: lightcyan; /* Line color */
  height: 50px; /* Override in-line if you want specific height. */
}
</style>
