.container
  .columns
    .column.col-2.col-sm-12.float-right.bg-dark.text-light
      h3.text-center
        p
          .i.icon.icon-message.text-success
        p Conference Room
      .divider

    #peer
      .toast.toast-primary
        span(v-if="clientId")
          small {{clientId}}
        span(v-else) Disconnected from Peer
      .divider
      .toast.toast-error(v-if="error") {{error}}
    .divider

    h5 Local Media
    #liveView
      video#my-video

    #model
      button.btn.btn-primary.input-group-btn(v-on:click="startLoading()" v-if="loadedModel === undefined && !loading") Load model
      .toast.toast-warning.text-center(v-if="loading")
        span Loading model
        .loading.loading-lg
      .toast.toast-success.text-center(v-if="loadedModel !== undefined && !loading") Model loaded

    .column.col-10.col-sm-12.float-right.bg-dark.text-light

      #callee
        .input-group
          span.input-group-addon Add contact to call
          input.form-input#callee(type="text" placeholder="Callee ID" v-model="calleeId")
          button.btn.btn-primary.input-group-btn(v-on:click="addPeer()")
            span Add
            i.icon.icon-arrow-down

      .divider

      #grid
        .columns
          .column.col-2.col-sm-12(v-for="peer in peers")
            .card
              .card-image
                video(v-bind:id="peer")
              .card-header
                button.btn.btn-primary.btn-small.float-right(v-on:click="makeCall(peer)") Call
              .card-subtitle.text-gray
                small {{peer}}