<h1>
    <i class="fa fa-users"></i>
    <span localize="employees"></span>
    <i class="fa fa-times pull-right close-button" close-all-ui></i>
</h1>

<ul class="tab-list" style="width: 100%;">
    <li ng-class="{ active: ctrl.tab == 'employees' }" ng-click="ctrl.tab = 'employees'" localize="employees"></li>
    <li ng-class="{ active: ctrl.tab == 'recruitment' }" ng-click="ctrl.tab = 'recruitment'"
        localize="recruitment"></li>
    <li ng-class="{ active: ctrl.tab == 'candidates' }" ng-click="ctrl.tab = 'candidates'">
        <span localize="candidates"></span>
        <div class="badge small" ng-if="settings.candidates.length > 0" style="float: right; margin-top: -5px;">{{
            settings.candidates.length }}
        </div>
    </li>
</ul>

<!-- Scrollbar -->
<div style="overflow: auto; height: 495px;">
    <!-- Employees -->
    <div class="padding" ng-if="ctrl.tab == 'employees'">
        <table class="medium hovered" ts-wrapper id="employees-table">
            <thead>
            <tr>
                <th ts-criteria="employee.employeeTypeName" localize="type"></th>
                <th ts-criteria="employee.name" localize="name"></th>
                <th ts-criteria="employeeLevelPriority" localize="level"></th>
                <th ts-criteria="productivity">
                    <i tooltip-append-to-body="true" uib-tooltip="{{ GetLocalized('tip_speed') }}" class="fa fa-tachometer"></i>
                    <span localize="speed"></span>
                </th>
                <th ts-criteria="employee.salary" localize="salary"></th>
                <th ts-criteria="label" localize="status" style="width: 210px;"></th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="employeeStat in ctrl.employeeStats | orderBy: employeeStat.employee.name track by employeeStat.employee.id"
                ng-click="ctrl.showEmployee(employeeStat.employee)" ts-repeat ts-hide-no-data ng-class="{ 'color-red': ['Idle', 'Unassigned'].includes(employeeStat.employeeState) }">
                <td ts-name="{{ ::Helpers.GetLocalized(employeeStat.employee.employeeTypeName) }}">
                    <icon class="icon {{ employeeStat.employee.employeeTypeName }}"
                          uib-tooltip="{{ ::GetLocalized(employeeStat.employee.employeeTypeName) }}"
                          tooltip-append-to-body="true"></icon>
                </td>
                <td>{{ employeeStat.employee.name }}</td>
                <td ts-name="{{ employeeStat.employeeLevelPriority }}">
                    <i class="fa" ng-class="{
                        'fa-star-o': employeeStat.employee.level == EmployeeLevels.Beginner,
                        'fa-star-half-o': employeeStat.employee.level == EmployeeLevels.Intermediate,
                        'fa-star': employeeStat.employee.level == EmployeeLevels.Expert }"></i>
                </td>
                <td>
                    {{ employeeStat.productivity | number: 0 }}%
                </td>
                <td>
                    {{ employeeStat.employee.salary | currency }}
                </td>
                <td>
                    <div class="progressBar" ng-if="employeeStat.progress != null">
                        <div class="indicator" style="width: {{ employeeStat.progress }}%">
                            <span ng-bind-html="employeeStat.label" class="small" style="text-align: left;"></span>
                    </div>
                    </div>
                    <span ng-if="employeeStat.progress == null" ng-bind-html="employeeStat.label"></span>
                </td>
            </tr>
            </tbody>
        </table>
        <p ng-if="ctrl.employeeStats.length == 0 && settings.unassignedEmployees.length == 0"
           localize="no_employees" class="color-red text-center"></p>
    </div>

    <!-- Recruitment -->
    <recruitment class="padding" ng-if="ctrl.tab == 'recruitment'"></recruitment>

    <candidates ng-if="ctrl.tab == 'candidates'"></candidates>
</div>