<div>

<div class="row">
  <div class="col">
    <div class="mt-4 pull-right">
      <button type="button" class="btn btn-secondary btn-sm" id="add-interface" ng-click="addInterface()">
        <span class="fas fa-plus"></span> Add Interface
      </button>
    </div>
  </div>
</div>
<p></p>
<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>IP Address</th>
        <th>Description</th>
        <th>SNMP Primary</th>
        <th>Services</th>
        <th><span class="pull-right">Actions</span></th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="intf in node.interfaces">
        <td>{{ intf.ipAddress }}</td>
        <td>{{ intf.description || 'N/A' }}</td>
        <td>{{ intf.snmpPrimary }}</td>
        <td>
          <div ng-hide="intf.services.length > 0">[No services]</div>
          <div ng-repeat="service in intf.services">
            <p>{{ service.name }}</p>
          </div>
        </td>
        <td>
          <div class="pull-right">
            <button type="button" class="btn btn-secondary btn-sm" uib-tooltip="Edit the interface" ng-click="editInterface($index)">
              <span class="fas fa-pencil"></span>
            </button>
            <button type="button" class="btn btn-secondary btn-sm" uib-tooltip="Remove the interface" ng-click="removeInterface($index)">
              <span class="fas fa-trash-can"></span>
            </button>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

</div>
