<div class="container">
  <div class="row">
    <h2>Select XOS to synch:</h2>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h2>G-XOS Slices:</h2>
    </div>
    <div class="col-xs-12">
      <xos-table
              config="vm.gSliceTableCgf"
              data="vm.gSlices">
      </xos-table>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12">
      <h2>Get L-XOS details:</h2>
    </div>
    <div
      ng-repeat="xos in vm.xoss"
      class="col-sm-2">
      <div
        class="well"
        ng-class="{active: xos.active}"
        ng-click="vm.toggleXos(xos)">
          {{xos.humanReadableName || xos.name}}
      </div>
    </div>
  </div>
  <div class="row" ng-if="vm.localSlices.length > 0">
    <div class="col-xs-12">
      <h2>L-XOS Slices:</h2>
    </div>
    <div class="col-xs-12">
      <xos-table
        config="vm.sliceTableCfg"
        data="vm.localSlices">
      </xos-table>
    </div>
  </div>
  <div class="row" ng-if="vm.localSlices.length > 0">
    <div class="col-xs-12">
      <h2>L-XOS Users:</h2>
    </div>
    <div class="col-xs-12">
      <xos-table
        config="vm.usersTableCfg"
        data="vm.localUsers">
      </xos-table>
    </div>
  </div>
</div>
<script type="text/ng-template" id="addInstance.html">
  <div class="modal-header">
      <h3 class="modal-title" id="modal-title">Add Instance to {{vm.slice.name}} on {{vm.slice.xos.name}}</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <xos-form ng-model="vm.model" config="vm.config"></xos-form>
  </div>
</script>
<script type="text/ng-template" id="listInstances.html">
  <div class="modal-header">
    <h3 class="modal-title" id="modal-title">Get Instances from {{vm.slice.name}} on {{vm.slice.xos.name}}</h3>
  </div>
  <div class="modal-body" id="modal-body">
    <xos-table data="vm.instances" config="vm.config"></xos-table>
  </div>
  <div class="modal-footer">
    <a ng-click="vm.close()" class="btn btn-warning">Close</a>
  </div>
</script>