<template>
  <v-app>
    <h1>{{ msg }}</h1>
    <v-divider></v-divider>
    <Video/>
    <v-divider></v-divider>
    <h3>Formats</h3>
    <Format/>
    <v-divider></v-divider>
    <h3>Controls</h3>
    <Controls/>
    <v-divider></v-divider>
    <v-footer>
      <v-container>
        <v-row align="center" justify="center">
              <v-icon>mdi-github</v-icon><a href="https://github.com/mpromonet/v4l2camera">v4l2camera</a><p>{{ version }}</p>
        </v-row>
     </v-container>
    </v-footer>
  </v-app>
</template>

<script>
import Video from './components/Video.vue';
import Format from './components/Format.vue';
import Controls from './components/Controls.vue';
import axios from "axios";
axios.defaults.baseURL = import.meta.env.VITE_APP_BASE_URL

export default {
  name: 'App',
  components: {
    Format,
    Controls,
    Video
  },
  mounted() {
    axios.get("/api/capabilities").then(
      (response) =>  {
        this.msg = response.data.card
        document.title = this.msg;
      } 
    );
    axios.get("/api/version").then(
      (response) => this.version = response.data); 
  },
  data() {
    return {
      msg: "...",
      panel: [1],
      version: "",
    };
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
}
h1 {
  text-align: center;
}
h3 {
  text-align: center;
}
p {
  margin-left: 0.5em;
}
</style>
