<div class="panel panel-default" data-ng-controller="serverController">
  <div class="panel-heading">
      <div class="panel-title">
          <div class="row">
            <div class="col-md-6">
                Servers
            </div>
            <div class="col-md-6">
                <form class="form-inline pull-right">
                    <div class="form-group">
                        <label for="search">Search:</label>
                        <input type="text" class="form-control" id="search" data-ng-model="servers_search">
                    </div>
                    <button type="button" title="Refresh" class="btn btn-default" aria-label="Refresh">
                        <span class="glyphicon glyphicon-refresh" title="Refresh" aria-hidden="false" ng-click="updateView()"></span>
                    </button>
                </form>
            </div>
          </div>
    </div>
  </div>

  <div class="panel-body">
    <table class="table table-striped table-bordered">
        <th width="3%">ID</th>
        <th width="10%">Name</th>
        <th width="10%">Address</th>
        <th width="10%">Xfer (in/out)</th>
        <th width="10%">Req/Resp</th>
        <th width="10%">Time</th>
        <th width="10%">Idle</th>
        <th width="1%"><center><span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span></center></th>
        

        <tr ng-repeat="s in servers | filter:servers_search | orderBy:'server_id'">
            <td>{{ s.server_id }}</td>
            <td>{{ s.server_name }}</td>
            <td>
                {{ s.source_address }}
                <div ng-hide="checkDetail(s.server_id)">
                    domains({{ s.domains.length}})
                    <div  ng-repeat="d in s.domains | orderBy:'domain_name'">
                    &nbsp&nbsp&nbsp{{ d.domain_name }}
                    </div>   
                </div>
            </td>
            <td>
                {{ s.bytes_in | bytes }}/{{ s.bytes_out | bytes }}
                <div ng-hide="checkDetail(s.server_id)">
                    &nbsp
                    <div  ng-repeat="d in s.domains | orderBy:'domain_name'">
                    &nbsp&nbsp&nbsp{{ d.bytes_in | bytes }}/{{ d.bytes_out | bytes }}
                    </div>   
                </div>
            </td>
            <td>
                {{ s.requests }}/{{ s.responses }}
                <div ng-hide="checkDetail(s.server_id)">
                    &nbsp
                    <div  ng-repeat="d in s.domains | orderBy:'domain_name'">
                    &nbsp&nbsp&nbsp{{ d.requests }}/{{ d.responses  }}
                    </div>   
                </div>
            </td>

            <td>{{ s.duration | hfcduration }}</td>
            <td>{{ s.idle | hfcduration }}</td>
            <td>
                <span class="glyphicon glyphicon-zoom-in" title="Detail" aria-hidden="false" ng-click="triggerDetail(s.server_id)"></span>
                <div ng-hide="checkDetail(s.server_id)">
                    &nbsp
                    <div  ng-repeat="d in s.domains | orderBy:'domain_name'">
                    <span class="glyphicon glyphicon-zoom-in" title="Detail" aria-hidden="false" ng-click="triggerDetail(s.server_id+d.domain_name)"></span>
                    </div>   
                </div>


            </td>
        </tr>

    </table>




  </div>
</div>