<div class="col-md-12 officetables" ng-controller="NavigationController">

    <div class="form-group">
        <br/>
        <div class="row">
            <div class="col-sm-3">
                <select chosen="offices" ng-model="officeId" id="officeId"
                        ng-options="office.id as office.name for office in offices"
                        ng-change="officeSelected()" required>
                </select>
            </div>

            <div class="col-sm-6">
                <ul class="list-inline">
                    <li data-ng-show="staff"> >>&nbsp;{{staff.displayName}}</li>
                    <li data-ng-show="center"> >>&nbsp;{{center.name}}</li>
                    <li data-ng-show="group"> >>&nbsp;{{group.name}}</li>
                    <li data-ng-show="client"> >>&nbsp;{{client.displayName}}</li>
                </ul>
            </div>
        </div>
    </div>

    <br/>

    <div class="row paneldesign">

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading officeheading">
                    <b>{{'label.button.loanofficers' | translate}}</b>
                    <div class="col-sm-6 pull-right">
                        <input ng-model="filterStaff" type="text" class="form-control" placeholder="{{'label.input.filterbyname' | translate}}" />
                    </div>
                </div>
                <div class="panel-body" style="height: 160px;overflow-y:auto;">
                    <table class="table table-responsive table-hover">
                        <tr valign="top" ng-repeat="staff in staffs  | filter:filterStaff" ng-class="{graybg: staff.id == selectedStaff}">
                            <td style="padding: 0px;">
                                <a ng-click="staffSelected(staff)">{{staff.displayName}}</a></td>
                            <td style="padding: 0px;">
                                <a ng-click="redirectOffice(staff.id)" data-toggle="tooltip" title="redirecting to staff">
                                    <i class="icon-user pull-right" style="color: #004444"  aria-hidden="true">
                                    </i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>


        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading" style="height:40px;">
                    <b>{{'label.button.centers' | translate}}</b>
                    <div class="col-sm-6 pull-right">
                        <input ng-model="filterCenter" type="text" class="form-control"
                               placeholder="{{'label.input.filterbyname' | translate}}" />
                    </div>
                </div>
                <div class="panel-body" style="height: 160px;overflow-y:auto;">
                    <table class="table table-responsive table-hover">
                        <tr ng-repeat="center in centers  | filter:filterCenter">
                            <td style="padding:0px;padding-right:0px;padding-top: 0px;">
                                <a ng-click="centerSelected(center)">{{center.name}}</a>
                            </td>
                            <td  style="padding: 0px;">
                                <a ng-click="redirectCenter(center.id)" data-toggle="tooltip" title="redirecting to centers">
                                    <i class="icon-map-marker pull-right" style="color: #004444" aria-hidden="true">
                                    </i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading" style="height:40px;">
                    <b>{{'label.button.groups' | translate}}</b>
                    <div class="col-sm-6 pull-right">
                        <input ng-model="filterGroup" type="text" class="form-control"
                               placeholder="{{'label.input.filterbyname' | translate}}"/>
                    </div>
                </div>
                <div class="panel-body" style="height: 160px;overflow-y:auto;">
                    <table class="table table-responsive table-hover">
                        <tr ng-repeat="group in groups  | filter:filterGroup">
                            <td style="padding:0px;padding-right:0px;padding-top: 0px;">
                                <a ng-click="groupSelected(group)">{{group.name}}</a>
                            </td>
                            <td  style="padding: 0px;">
                                <a ng-click="redirectGroup(group.id)" data-toggle="tooltip" title="redirecting to groups">
                                    <i class="icon-group pull-right" style="color: #004444" aria-hidden="true">
                                    </i>
                                </a>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

    </div>

    <br/>

    <div class="row">
        <div class="col-sm-12 col-md-12">
            <div class="panel panel-default">
                <div class="panel-heading" style="height: 40px">
                    <table>
                        <tr>
                            <th class="col-sm-2">{{'label.heading.name' | translate}}</th>
                            <th class="col-sm-2">{{'label.heading.clientno' | translate}}</th>
                            <th class="col-sm-2">{{'label.heading.officeexternalid' | translate}}</th>
                            <th class="col-sm-2">{{'label.heading.office' | translate}}</th>
                            <th class="col-sm-2">{{'label.heading.staff' | translate}}
                                <input ng-model="filterClient" type="text" class="form-control pull-right"
                                       placeholder="{{'label.input.filterbyname' | translate}}"  style="border-radius:24px; width:150px"/>
                            </th>

                        </tr>
                    </table>
                </div>
                <div class="panel-body" style="height: 250px;overflow-y:auto;">
                    <table class="table table-responsive" style="padding: 0px;">
                        <tr class="pointer-main" ng-repeat="client in clients | orderBy:'displayName':reverse  | filter:filterClient">
                            <td class="pointer col-sm-2" data-ng-click="viewClient(client.id)">
                                <i class="icon-stop {{client.status.code | StatusLookup}}"></i> {{client.displayName}}</td>
                            <td class="pointer col-sm-2" data-ng-click="viewClient(client.id)">{{client.accountNo}}</td>
                            <td class="pointer col-sm-2" data-ng-click="viewClient(client.id)">{{client.externalId}}</td>
                            <td class="pointer col-sm-2" data-ng-click="viewClient(client.id)">{{client.officeName}}</td>
                            <td class="pointer col-sm-2" data-ng-click="viewClient(client.id)">{{client.staffName}}</td>
                        </tr>

                    </table>
                </div>
            </div>
        </div>
    </div>

</div>