<template>
  <div id="app">
    <h1>IDs</h1>
    <ul v-for="(id, index) in connectionIDs">
      <li>
        {{ id }}
        <div class="btn btn-danger" @click="removeId(index)">X</div>
      </li>
    </ul>
    <input v-model="newId">
    <div class="btn btn-default" @click="addConnectionId">Add ID</div>
    <div class="clients row">
      <div class="col-lg-4 client-wrapper" v-for="id in connectionIDs">
        <guac-client :connectionID="id" />
      </div>
    </div>


  </div>
</template>

<script>

import GuacClient from './components/GuacClientManager'

export default {
  name: 'App',
  components: { GuacClient },
  data () {
    return {
      connectionIDs: [],
      newId: null
    }
  },
  methods: {
    addConnectionId () {
      this.connectionIDs.push(this.newId)
      this.newId = null
    },
    removeId (index) {
      this.connectionIDs.splice(index, 1)
    }
  }
}
</script>

<style>
  h1{
    margin: 0px;
  }
  html, body, #app {
    height: 100%;
    margin: 0px !important;
    padding: 0px !important;
    padding-top: 0;
    padding-left: 0;
    width: 100%;
  }
  .clients{
  }

  .managed-client{
    height: 260px;
    width: 450px;
  }

  .client #display div{
    margin: auto;
  }


</style>
