<div class="padding" style="overflow: auto; height: 575px;">
    <h3>Managers to control</h3>

    <p>In charge: <strong>{{ selectedWorkstation.employee.employees.length
        }}/{{ ctrl.maxInCharge}}</strong></p>

    <table>
        <tbody>
        <tr ng-repeat="employee in ctrl.managers">
            <td class="text-bold">{{ employee.name }}</td>
            <td><icon class="{{employee.employeeTypeName }}"></icon> <span class="{{ employee.employeeTypeName }}" localize="{{ employee.level }}"></span></td>
            <td>
                <div ng-click="ctrl.setEmployeeToManager(selectedWorkstation.employee, employee)" ng-class="{'active': ctrl.isEmployeeActive(selectedWorkstation.employee, employee) }"
                     class="toggle-switch pull-right" style="margin: 2px;">
                    <span></span>
                </div>
            </td>
        </tr>
        </tbody>
    </table>

    <hr>

    <h3>Affected employees</h3>
    <table>
        <thead>
        <tr>
            <th></th>
            <th style="width: 25%">Name</th>
            <th style="width: 25%">Schedule</th>
            <th style="width: 30%">Mood</th>
            <th style="width: 10%"></th>
        </tr>
        </thead>
        <tr ng-repeat="employeeInfo in ctrl.controlledEmployees track by employeeInfo.employee.id">
            <th>
                <icon class="icon {{ employeeInfo.employee.employeeTypeName }}"
                      uib-tooltip="{{ ::GetLocalized(employeeInfo.employee.employeeTypeName) }}"
                      tooltip-append-to-body="true"></icon>
            </th>
            <td>{{ employeeInfo.employee.name }}</td>
            <td class="monospaced">{{ employeeInfo.schedule }}</td>
            <td>
                <div class="progressBar small">
                    <div class="indicator"
                         ng-class="{red: employeeInfo.employee.mood < 35, yellow: employeeInfo.employee.mood >= 35 && employeeInfo.employee.mood < 75, green: employeeInfo.employee.mood >= 75}"
                         style="width: {{ employeeInfo.employee.mood }}%">
                                <span class="small">
                                {{ employeeInfo.employee.mood | number: 0 }}%
                            </span>
                    </div>
                </div>
            </td>
            <td class="text-right">
                <button class="small cancel" ng-click="ctrl.showEmployee(employeeInfo.employee)" uib-tooltip="Go to employee"><i class="fa fa-user"></i></button>
                <button class="small" ng-disabled="employeeInfo.employee.vacationHoursLeft > 0" ng-click="ctrl.sendOnVacation(employeeInfo.employee)" uib-tooltip="{{ GetLocalized('send_on_vacation')}}" tooltip-append-to-body="true">
                    <i class="fa fa-glass"></i>
                </button>
            </td>
        </tr>
    </table>

</div>