<div ng-if="selectedWorkstation.employee.type == EmployeeTypes.Developer">
    <div class="padding"
         ng-if="ctrl.availableJobs.length != 0 && ctrl.managerWorkstation == null">
        <div class="flex-row">
            <div class="flex1 text-bold column-center">Job</div>
            <div class="flex3">
                <div dropdown-select="ctrl.availableJobInfos"
                     dropdown-model="ctrl.selectedJobInfo"
                     dropdown-onchange="ctrl.jobChange(selected)"
                     dropdown-item-label="title">
                </div>
            </div>
        </div>
    </div>

    <div class="padding" ng-if="ctrl.managerWorkstation != null">
        Managed by {{ ctrl.managerWorkstation.employee.name }}
    </div>
</div>

<div class="padding flex-row">
    <div class="flex3">
        <table class="big">
            <tbody>
            <tr>
                <td class="dimmed width50" localize="salary"></td>
                <td class="text-bold">{{selectedWorkstation.employee.salary | currency }}</td>
            </tr>
            <tr>
                <td class="dimmed width50" localize="level"></td>
                <td class="text-bold">
                    <span localize="{{ selectedWorkstation.employee.level }}"></span>
                    <div class="inline" tooltip-enable="!ctrl.isReadyForTierUpgrade()"
                         uib-tooltip-html="ctrl.getUpgradeTooltipText()">
                        <button type="button" class="blue tiny square" ng-disabled="!ctrl.isReadyForTierUpgrade()"
                                ng-click="ctrl.upgradeEmployee()" localize="upgrade"></button>
                    </div>
                </td>
                <td>
            </tr>
            <tr>
                <td class="dimmed width50" localize="employment"></td>
                <td class="text-bold" localize="x_days" localize-data-days="{{ ctrl.employementDuration }}"></td>
            </tr>
            <tr>
                <td class="dimmed width50" localize="required_wer"></td>
                <td class="text-bold" localize="stats_wer"
                    localize-data-requiredwer="{{selectedWorkstation.employee.requiredWer}}"
                    localize-data-companywer="ctrl.wer.total"></td>
            </tr>
            <tr>
                <td class="dimmed width50" localize="mood"></td>
                <td>
                    <div class="progressBar small">
                        <div class="indicator"
                             ng-class="{red: selectedWorkstation.employee.mood < 35, yellow: selectedWorkstation.employee.mood >= 35 && selectedWorkstation.employee.mood < 75, green: selectedWorkstation.employee.mood >= 75}"
                             style="width: {{ selectedWorkstation.employee.mood }}%">
                        <span class="small">
                                {{ selectedWorkstation.employee.mood | number: 0 }}%
                            </span>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="dimmed width50" localize="last_vacation"></td>
                <td>
                    <span ng-if="selectedWorkstation.employee.lastVacationDay != null">
                        <span ng-if="daysPlayed < selectedWorkstation.employee.lastVacationDay">-</span>
                    <span ng-if="daysPlayed >= selectedWorkstation.employee.lastVacationDay"
                          localize="days_ago"
                          localize-data-days="{{ daysPlayed - selectedWorkstation.employee.lastVacationDay }}">
                    </span>
                    </span>

                    <span ng-if="selectedWorkstation.employee.lastVacationDay == null" localize="never"></span>
                </td>
            </tr>
            <tr ng-if="selectedWorkstation.employee.vacationHoursLeft > 0">
                <td class="dimmed width50" localize="vacationHoursLeft"></td>
                <td localize="x_hours" localize-data-hours="{{ selectedWorkstation.employee.vacationHoursLeft }}">
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="flex2">
        <table class="big">
            <tbody>
            <tr>
                <td class="dimmed" localize="base_speed"></td>
                <td class="text-bold">{{ selectedWorkstation.employee.speed | number: 0 }}%</td>
            </tr>
            <tr>
                <td class="dimmed" localize="office_bonus"></td>
                <td class="text-bold">{{ ctrl.officeBonus }}%</td>
            </tr>
            <tr ng-if="!ctrl.isManager">
                <td class="dimmed" localize="manager_bonus"></td>
                <td class="text-bold">{{ ctrl.managerBonus | number: 0 }}%</td>
            </tr>
            <tr>
                <td class="dimmed" localize="mood_penalty"></td>
                <td class="text-bold">{{ ctrl.moodBonus | number: 0 }}%</td>
            </tr>
            <tr class="border-top">
                <td class="dimmed" localize="productivity"></td>
                <td>
                    <span class="text-bold"
                          ng-class="{ 'color-red': ctrl.productivity < selectedWorkstation.employee.speed }">{{ ctrl.productivity | number: 0 }}%</span>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
