<template>
  <v-app id="inspire">

    <v-app-bar app>
      <img class="mr-3" :src="require('./assets/logo.png')" height="50" alt="Wg Gen Web"/>
      <v-toolbar-title to="/">Configuration Wireguard VPN</v-toolbar-title>

      <v-spacer />

      <v-toolbar-items>
        <v-btn to="/clients">
          Clients
          <v-icon right dark>mdi-account-network-outline</v-icon>
        </v-btn>
        <v-btn to="/server">
          Serveur
          <v-icon right dark>mdi-vpn</v-icon>
        </v-btn>
      </v-toolbar-items>

    </v-app-bar>

    <v-content>
      <v-container>
        <router-view />
      </v-container>
      <Notification v-bind:notification="notification"/>
    </v-content>

    <v-footer app>
      <v-row justify="start" no-gutters>
        <v-col cols="12" lg="6" md="12" sm="12">
          <div :align="$vuetify.breakpoint.smAndDown ? 'center' : 'left'">
            <small>{{ new Date().getFullYear() }} </small>
            <small><a class="pr-1 pl-1" href="http://www.wtfpl.net/" target="_blank">Licence WTFPL</a></small>
          </div>
        </v-col>
      </v-row>
      <v-row justify="end" no-gutters>
        <v-col cols="12" lg="6" md="12" sm="12">
          <div :align="$vuetify.breakpoint.smAndDown ? 'center' : 'right'">
            <small>Sources </small>
            <a href="https://gitea.rnmkcy.eu/yann/wg-webui-fr">Gitea</a>
          </div>
        </v-col>
      </v-row>
    </v-footer>

  </v-app>
</template>

<script>
  import {ApiService} from "./services/ApiService";
  import Notification from './components/Notification'

  export default {
    name: 'App',

    components: {
      Notification
    },

    data: () => ({
      api: null,
      version:'N/A',
      notification: {
        show: false,
        color: '',
        text: '',
      },
    }),

    mounted() {
      this.api = new ApiService();
      this.getVersion()
    },

    created () {
      this.$vuetify.theme.dark = true
    },

    methods: {
      getVersion() {
        this.api.get('/server/version').then((res) => {
          this.version = res.version;
        }).catch((e) => {
          this.notify('error', e.response.status + ' ' + e.response.statusText);
        });
      },
      notify(color, msg) {
        this.notification.show = true;
        this.notification.color = color;
        this.notification.text = msg;
      }
    }
  };
</script>
