<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="5%">Duration</th>
            <th width="5%">State</th>
            <th width="5%">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.server_state }}</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>