<div class="content-filter">
<div class="action-menu">
    <button class="btn btn-danger" translate
        ng-class="{ disabled: !listing.hasSelected() }"
        ng-if="listing.enableActions"
        ng-click="deleteSelectedNodes()">Delete Selected</button>
    <button class="btn btn-default fa fa-check" id="listing-enable-change" title="Change"
        ng-click="listing.enableActions = !listing.enableActions" ng-class="{ active: listing.enableActions }">
    </button>
</div>
</div>

<div class="container-cards-pf nodes-container-cards">
    <div class="card-pf card-pf-accented nodes-heatmap-card">
        <div node-heat-map nodes="nodes" stats="stats">
        </div>
    </div>
    <div class="card-pf card-pf-accented nodes-os-card">
        <h2 class="card-pf-title" translate>OS Versions</h2>
        <div class="card-pf-body">
            <div node-os-graph class="row" nodes="nodes">
            </div>
        </div>
    </div>
</div>

<div>
<table listing-table class="listing-ct nodes-listing">
    <thead>
        <tr>
            <td colspan="5">
                <a id="add-node" class="pull-right" ng-click="addNode()">
                    <i translate class="pficon pficon-add-circle-o"></i>
                    <span translate>Add Kubernetes Node</span>
                </a>
                <h3 translate>Nodes</h3>
            </td>
        </tr>
        <tr>
            <th></th>
            <th translate>Name</th>
            <th translate>Operating System</th>
            <th translate>Address</th>
            <th translate>Status</th>
        </tr>
    </thead>
    <tbody ng-repeat="(link, item) in nodes track by item.metadata.name"
        ng-init="id = item.metadata.name" data-id="{{id}}"
            ng-class="{open: listing.expanded(id)}">
        <tr ng-click="listing.activate(id)" class="listing-ct-item">
            <td ng-click="listing.toggle(id, $event)"
                class="listing-ct-toggle">
                <i class="fa fa-fw" ng-if="!listing.enableActions"></i>
                <div class="text-center" ng-if="listing.enableActions">
                    <input type="checkbox" ng-false-value="undefined"
                        ng-model="listing.selected[link]"/>
                </div>
            </td>
            <th>{{item.metadata.name}}</th>
            <td>
                <div ng-if="item.status.nodeInfo.osImage">{{item.status.nodeInfo.osImage}}</div>
            </td>
            <td>{{item.spec.externalID}}</td>
            <td>
                <span class="spinner-inline node-status" kubernetes-status-icon status="nodeStatusIcon(item)"></span>
                {{ nodeStatus(item) }}
            </td>
        </tr>
        <tr class="listing-ct-panel" ng-if="listing.expanded(id)">
            <td listing-panel kind="node" colspan="5"></td>
        </tr>
    </tbody>
</table>
</div>
