<template>
  <div class="container">
    <section>
      <h3>Choose a room</h3>
      <b-field position="is-centered">
        <b-select placeholder="Select a room">
          <option>
          </option>
        </b-select>
        <button class="button is-success" @click="connect">Connect</button>
      </b-field>
    </section>
    <b-loading :active.sync="isLoading" :is-full-page=false />
  </div>
</template>

<script>
export default {
  name: 'ClientSelector',
  data () {
    return {
      isLoading: false,
      name: ''
    }
  },
  methods: {
    async connect () {
      this.$emit('connect', this.name)
    }
  }
}
</script>

<style>

</style>
