<template>
  <v-app id="inspire">
    <v-navigation-drawer v-if="isAuthenticated" fixed v-model="drawer" app>
      <v-list dense>
        <v-list-tile v-for="item in navItems" :key="item.route" :to="item.route">
          <v-list-tile-action>
            <v-icon>{{ "fa-" + item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar v-if="isAuthenticated" color="primary" dark fixed app>
      <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title style="width: 300px" class="ml-0 pl-3">
        <v-avatar size="32px" tile>
          <img :src="require('./assets/logo.svg')" alt="AyaNova">
        </v-avatar>
        <span class="hidden-sm-and-down">AyaNova</span>
      </v-toolbar-title>
      <v-text-field flat solo-inverted hide-details prepend-inner-icon="fa-search" label="Search"></v-text-field>
      <v-spacer></v-spacer>
      <v-btn icon v-bind:href="helpUrl" target="blank;">
        <v-icon>fa-question-circle</v-icon>
      </v-btn>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-layout justify-center>
          <router-view></router-view>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer v-if="!isAuthenticated">
      <v-layout>
        <v-flex primary py-2 text-xs-center white--text xs12>
          <div>
            <a href="https://ayanova.com" target="_blank">
              <span class="white--text caption">AyaNova ({{version}}) {{copyright}}</span>
            </a>
          </div>
        </v-flex>
      </v-layout>
    </v-footer>
  </v-app>
</template>

<script>
import aboutInfo from "./api/aboutinfo";

export default {
  name: "App",
  data() {
    return {
      drawer: null
    };
  },
  mounted() {
    if (!this.$store.state.authenticated) {
      this.$router.replace({ name: "login" });
    }
  },
  methods: {
    setAuthenticated(status) {
      this.$store.state.authenticated = status;
    },
    logout() {
      this.$store.state.authenticated = false;
    }
  },
  computed: {
    isAuthenticated() {
      return this.$store.state.authenticated === true;
    },
    navItems() {
      return this.$store.state.navItems;
    },
    copyright() {
      return aboutInfo.copyright;
    },
    version() {
      return aboutInfo.version;
    },
    helpUrl() {
      return this.$store.state.helpUrl;
    }
  },
  props: {
    source: String
  }
};
</script>
