<template>
  <v-app>
    <v-app-bar
      app
      color="#ab0000"
      dark
    >
      <v-toolbar-title>Albatross</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-help</v-icon>
      </v-btn>
    </v-app-bar>
        <v-container
          class="fill-height"
          fluid
        >
          <v-row
            align="center"
            justify="center"
            v-if="!start"
          >
            <v-col
              cols="12"
              sm="8"
              md="4"
            >
              <v-card class="elevation-12" >
                <v-toolbar
                  color="#ab0000"
                  dark
                  flat
                >
                  <v-toolbar-title>Login</v-toolbar-title>
                  <v-spacer></v-spacer>
                  <v-tooltip bottom>
                    <span>Source</span>
                  </v-tooltip>
                </v-toolbar>
                <v-card-text>
                  <v-form>
                    <v-text-field v-if="!start" v-model="username" label="Please enter your name"></v-text-field>
                  </v-form>
                </v-card-text>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="#ab0000" v-if="!start" @click="startM">Start</v-btn>
                </v-card-actions>
              </v-card>
            </v-col>
          </v-row>
          <VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/>

        </v-container>
    <v-footer
      color="#ffffff"
      app
    >
    <v-col
    class="text-center"
    cols="12"
  >
   <strong>Özgür Yazılım Derneği</strong>
  </v-col>
    </v-footer>
  </v-app>
</template>



<script>
import VueJanus from "@/lib/VueJanus";

export default {
  name: 'App',

  components: {
    VueJanus
  },

  data: () => ({
    test: ' ',
    room:1234,
    username: '',
    start:false
  }),
  mounted () {
  },
  methods: {
    startM () {
      if (this.username) {
        this.start = true
      }
    }
  }
};
</script>
