<div class="row">
  <div class="col-xs-12">
    <button ng-click="nodeListCtrl.enroll()" class="btn btn-default pull-right-bottom">
      <i class="fa fa-plus"></i>
      Enroll Node
    </button>
    <h1>Nodes</h1>
  </div>
</div>
<div class="row">
    <div class="col-xs-12">
        <table class="table table-condensed table-striped">
            <thead>
            <tr>
                <th>State</th>
                <th>UUID</th>
                <th>Instance</th>
                <th>Power State</th>
                <th>Maintenance</th>
            </tr>
            </thead>
            <tbody ng-if="nodeListCtrl.nodes.$resolved && nodeListCtrl.nodes.length > 0">
            <tr ng-repeat="node in nodeListCtrl.nodes">
                <td>{{node.provision_state}}</td>
                <td>
                    <a href="#/ironic/nodes/{{node.uuid}}">
                        {{node.uuid}}
                    </a>
                </td>
                <td>{{node.instance_uuid || 'None'}}</td>
                <td>{{node.power_state}}</td>
                <td>{{node.maintenance}}</td>
            </tr>
            </tbody>
            <tbody ng-if="nodeListCtrl.nodes.$resolved && nodeListCtrl.nodes.length == 0">
            <tr>
                <td colspan="5" class="text-center text-muted">
                    <small><em>No nodes were found.</em></small>
                </td>
            </tr>
            </tbody>
            <tbody ng-if="!nodeListCtrl.nodes.$resolved">
            <tr>
                <td colspan="5" class="text-center text-muted">
                    <i class="fa fa-refresh fa-spin"></i>
                    Loading nodes...
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
