<div class="row panel panel-default" style="position: sticky; top: 60px; z-index: 2">
  <div class="panel-body">
    <ol class="breadcrumb" style="margin-top: 0px; margin-bottom: 0px;">
      <li>Thermostat</li>
      <li class="lead" translate>jvmList.BREADCRUMB</li>
    </ol>
  </div>
</div>
<div class="container-fluid container-cards-pf">
  <div class="jvmList-container">
    <div class="text-right">
      <label for="aliveOnlySwitch" class="label label-default" translate>jvmList.ALIVE_ONLY</label>
      <input class="bootstrap-switch pull-right" id="aliveOnlyState" name="aliveOnlySwitch" data-size="mini" type="checkbox" checked/>
      <button type="button" class="btn btn-default" id="refreshButton" ng-click="$ctrl.loadData()"><span class="fa fa-refresh"></span></button>
    </div>
    <div class="pfToolbar col-md-12">
      <pf-toolbar id="jvmListToolbar" config="$ctrl.toolbarConfig"></pf-toolbar>
    </div>
    <div class="pfListView col-md-12">
      <pf-list-view config="$ctrl.listConfig"
                    items="$ctrl.items"
                    page-config="$ctrl.pageConfig"
                    empty-state-config="$ctrl.emptyStateConfig">
        <div class="list-view-pf-left">
          <span class="pficon pficon-screen list-view-pf-icon-med"></span>
        </div>
        <div class="list-view-pf-description">
          <div class="list-group-item-heading">
            {{item.hostname}}
          </div>
          <div class="list-view-pf-additional-info">
            <div class="list-view-pf-additional-info-item">
              <span class="pficon pficon-virtual-machine"></span>
              <strong>{{item.jvms.length}}</strong> JVMs
            </div>
            <div class="list-view-pf-additional-info-item" ng-click="$event.stopPropagation()">
              <span class="pficon pficon-server"></span>
              <a ui-sref="systemInfo({ systemId: item.systemId })" translate>jvmList.SYSTEM_INFO_LABEL</a>
            </div>
            <div class="list-view-pf-additional-info-item">
              <span class="fa fa-clock-o"></span>
               <span translate="jvmList.START_TIME_LIST" translate-values="{ date: '{{item.timeCreated | timestampToDate}}' }"></span>
            </div>
          </div>
        </div>
        <list-expanded-content>

          <pf-list-view
                items="$parent.item.jvms"
                page-config="$parent.item.pageConfig"
                config="$ctrl.jvmConfig">

            <div class="list-view-pf-left">
              <span class="fa fa-angle-right"></span>
              <span class="pficon pficon-virtual-machine list-view-pf-icon-med"></span>
            </div>
            <div class="list-view-pf-description">
              <div class="list-group-item-heading">
                {{item.mainClass}}
              </div>
              <div class="list-view-pf-additional-info">
                <div class="list-view-pf-additional-info-item" ng-click="$event.stopPropagation()">
                  <span class="pficon pficon-container-node"></span>
                  <a ui-sref="jvmInfo({ systemId: $parent.item.systemId, jvmId: $parent.item.jvmId })" translate>jvmList.jvmEntry.JVM_INFO_LINK</a>
                </div>
                <div class="list-view-pf-additional-info-item">
                    <span class="pficon" ng-class="item.isAlive ? 'pficon-ok' : 'pficon-error-circle-o'"></span>
                </div>
                <div class="list-view-pf-additional-info-item">
                  <span class="fa fa-clock-o"></span>
                  <span translate="jvmList.START_TIME_LIST" translate-values="{ date: '{{item.startTime | timestampToDate}}' }"></span>
                </div>
              </div>
            </div>
          </pf-list-view>

        </list-expanded-content>
      </pf-list-view>
    </div>
  </div>
</div><!-- /container -->