<template>
  <div class="managed-client" >

    <vue-guacamole-client ref="client" :connectionID="connectionID" >
      <div slot='header' class="rows">
        <div class="btn btn-default" @click="$refs.client.setViewState('thumbnail')">Thumbnail</div>
        <div class="btn btn-default" @click="setViewState('full')">Full</div>
        <div class="btn btn-default" @click="setViewState('fullscreen')">Fullscreen</div>
      </div>
      <div slot='footer' class="rows">
        <h4>Footer Stuff
          <div class="small pull-right">Important stuff that belongs in the footer</div>
        </h4>
      </div>
    </vue-guacamole-client>


    <!--<guac-footer @viewStateChange="setViewState"/>-->
  </div>
</template>

<script>

  import VueGuacamoleClient from '../../../src/GuacClient'


  export default {
    components: {VueGuacamoleClient},
    props: ['connectionID'],
    name: 'GuacClientManager',
    methods: {
      setViewState(state) {
        this.$refs.client.setViewState(state)
        // this.viewState = state
        // if (this.viewState == 'fullscreen'){
        //   this.$refs.client.fullscreen()
        // }
      }
    }
  }
</script>

<style scoped>
  .managed-client {
    padding: 0px;
    /*margin: 10px;*/
  }
  /*.rows{*/
  /*background-color: red;*/
/*}*/
</style>
