<div class="content-container" ng-controller="EmployeeController">
    <ul class="breadcrumb">
        <li><a href="#/organization">{{'label.anchor.organization' | translate}}</a></li>
        <li class="active">{{'label.anchor.manageemployees' | translate}}&nbsp;&nbsp;{{employee.lastname}}</li>
    </ul>
    <div class="card">
        <div class="content">
            <div class="toolbar">
            <div class="row">
                <div class="col-md-6">
                    <input ng-autofocus="true" ng-model="filterText" type="text" ng-keyup="onFilter()" class="form-control" placeholder="{{'label.input.filterbyname' | translate}}">
                </div>
                <div class="col-md-6">
                    <div class="pull-right">
                        <a href="#/createemployee" class="btn btn-primary" has-permission='CREATE_STAFF'><i class="fa fa-plus "></i>&nbsp;&nbsp;{{'label.button.createemployee' | translate }}</a>
                        <a href="#/bulkimportemployees" class="btn btn-primary" has-permission='CREATE_STAFF'>
                            <i class="fa fa-upload"></i>&nbsp;{{'label.button.importemployees' | translate}}</a>
                    </div>
                </div>
            </div>
            <br/>
            <div class = "row">
                <div class="pull-right">
                    <div class="col-md-12">
                        <form>
                            <input type="radio" id="radio_active" ng-model="showActive" ng-value="true" style="margin:5px">
                            <label for="radio_active"style="margin-right:25px"> Active </label>
                            <input type="radio" id="radio_inactive" ng-model="showActive" ng-value="false" style="margin:5px">
                            <label for="radio_inactive" style="margin-right:75px"> Inactive </label>
                        </form>
                    </div>
                </div>
            </div>
            </div>
            <br/>
            <table class="table">
                <thead>
                <tr class="graybg">
                    <th>{{ 'label.heading.name' | translate }}</th>
                    <th>{{ 'label.heading.isLoanOfficer' | translate }}</th>
                    <th>{{ 'label.heading.office' | translate }}</th>
                    <th>{{ 'label.heading.status' | translate }}</th>
                </tr>
                </thead>
                <tbody>
                
                <tr class="pointer-main" dir-paginate="employee in employees | filter:{displayName:filterText} | filter:{isActive:showActive} | itemsPerPage: EmployeesPerPage">
                    <td class="pointer" data-ng-click="routeTo(employee.id)">{{employee.displayName}}</td>
                    <td class="pointer" data-ng-click="routeTo(employee.id)">{{employee.isLoanOfficer}}</td>
                    <td class="pointer" data-ng-click="routeTo(employee.id)">{{employee.officeName}}</td>
                    <td class="pointer" data-ng-click="routeTo(employee.id)">
                        <i class="fa fa-stop {{'employees.StatusType.active.' + employee.isActive | StatusLookup}}" uib-tooltip="{{'label.tooltip.employees.active.' + employee.isActive | translate}}" tooltip-placement="right"></i>
                    </td>
                </tr>
                </tbody>
            </table>
            <dir-pagination-controls boundary-links="true" template-url="bower_components/angular-utils-pagination/dirPagination.tpl.html"></dir-pagination-controls>
        </div>
    </div>
</div>