<div ng-controller="JVM.JVMsController">

  <div>
    <ul class="nav nav-tabs connected">
      <li ng-repeat="link in breadcrumbs" ng-show="isValid(link)" ng-class='{active : isActive(link.href)}'>
        <a ng-href="{{link.href}}{{hash}}" ng-bind-html-unsafe="link.content"></a>
      </li>
      <li class="pull-right">
        <a href='' ng-click="fetch()"><i class="icon-refresh"></i> Refresh</a>
      </li>
    </ul>
  </div>

  <div ng-hide='data.length > 0' class='row-fluid'>
    {{status}}
  </div>

  <div ng-show='data.length > 0' class="row-fluid">
    <table class='centered table table-bordered table-condensed table-striped'>
      <thead>
      <tr>
        <th>PID</th>
        <th>Name</th>
        <th>Agent URL</th>
        <th></th>
      </tr>
      </thead>
      <tbody>
        <tr ng-repeat="jvm in data">
          <td>{{jvm.id}}</td>
          <td>{{jvm.alias}}</td>
          <td><a href='' title="Connect to this agent" ng-click="connectTo(jvm.agentUrl)">{{jvm.agentUrl}}</a></td>
          <td>
            <a class='btn control-button' href="" title="Stop Agent" ng-show="jvm.agentUrl" ng-click="stopAgent(jvm.id)"><i class="icon-off"></i></a>
            <a class='btn control-button' href="" title="Start Agent" ng-hide="jvm.agentUrl" ng-click="startAgent(jvm.id)"><i class="icon-play-circle"></i></a>
          </td>
        </tr>

      </tbody>
    </table>

  </div>


</div>
