<h1 class="workstation">
    <div class="text-hover-blue inline">
        <i class="fa fa-pencil-square-o"></i>
        <input type="text" ng-model="selectedWorkstation.employee.name">
    </div>

    <i class="fa fa-times pull-right close-button" close-all-ui></i>

    <div class="flex-row {{selectedWorkstation.employee.employeeTypeName}} pull-right" style="display: inline; position: relative; top: -3px; margin-right: 15px;">
        <icon class="{{ selectedWorkstation.employee.employeeTypeName }}"></icon>
        <span localize="{{selectedWorkstation.employee.employeeTypeName}}"></span>
        <span>{{ ctrl.employeeProductivity | number: 0 }}%</span>
    </div>
</h1>

<ul class="tab-list" style="width: 100%;">
    <li ng-class="{ active: ctrl.tab == 'features' }" ng-show="selectedWorkstation.employee.employeeTypeName == EmployeeTypeNames.Researcher" ng-click="ctrl.tab = 'features'" localize="features"></li>
    <li ng-class="{ active: ctrl.tab == 'frameworks' }" ng-show="selectedWorkstation.employee.employeeTypeName == EmployeeTypeNames.Researcher" ng-click="ctrl.tab = 'frameworks'" localize="frameworks"></li>
    <li ng-class="{ active: ctrl.tab == 'development' }" ng-show="ctrl.isProductionEmployee" ng-click="ctrl.tab = 'development'" localize="development"></li>
    <li ng-class="{ active: ctrl.tab == 'leadDeveloper' }" ng-show="selectedWorkstation.employee.employeeTypeName == EmployeeTypeNames.LeadDeveloper" ng-click="ctrl.tab = 'leadDeveloper'" localize="leaddeveloper"></li>
    <li ng-class="{ active: ctrl.tab == 'sales-executive' }" ng-show="selectedWorkstation.employee.employeeTypeName == EmployeeTypeNames.SalesExecutive" ng-click="ctrl.tab = 'sales-executive'" localize="salesexecutive"></li>
    <li ng-class="{ active: ctrl.tab == 'manager' }" ng-show="isManager" ng-click="ctrl.tab = 'manager'" localize="manager"></li>
    <li ng-class="{ active: ctrl.tab == 'hrmanager' }" ng-show="isHrManager" ng-click="ctrl.tab = 'hrmanager'" localize="hrmanager"></li>
    <li ng-class="{ active: ctrl.tab == 'schedule' }" ng-click="ctrl.tab = 'schedule'" localize="schedule"></li>
    <li ng-class="{ active: ctrl.tab == 'stats' }" ng-click="ctrl.tab = 'stats'" localize="stats"></li>
</ul>

<div style="position: absolute;right: 17px;top: 57px;">
    <button class="small" ng-disabled="selectedWorkstation.employee.vacationHoursLeft > 0" ng-click="ctrl.sendOnVacation()" tooltip-append-to-body="true" uib-tooltip="{{ GetLocalized('send_on_vacation') }}"><i class="fa fa-glass"></i></button>
    <button class="small blue" ng-click="ctrl.detachFromWorkstation()" tooltip-append-to-body="true" uib-tooltip="{{ GetLocalized('remove_from_desk') }}"><i class="fa fa-sign-out"></i></button>
    <button class="small red" ng-click="ctrl.dismiss()" tooltip-append-to-body="true" uib-tooltip="{{ GetLocalized('dismiss') }}"><i class="fa fa-times"></i></button>
</div>

<div class="tab-content">
    <!-- Development -->
    <workstation-development ng-if="ctrl.tab == 'development'"></workstation-development>

    <!-- Merging -->
    <workstation-merging ng-if="ctrl.tab == 'merging'"></workstation-merging>

    <!-- Manager -->
    <workstation-manager ng-if="isManager && ctrl.tab == 'manager'"></workstation-manager>

    <!-- Research -->
    <workstation-lead-developer ng-if="ctrl.tab == 'leadDeveloper'"></workstation-lead-developer>

    <!-- HR Manager -->
    <workstation-hr-manager ng-if="isHrManager && ctrl.tab == 'hrmanager'"></workstation-hr-manager>

    <!-- Manager -->
    <workstation-sales-executive ng-if="ctrl.tab == 'sales-executive'"></workstation-sales-executive>

    <!-- CTO Features -->
    <workstation-researcher-features ng-if="ctrl.tab == 'features'"></workstation-researcher-features>

    <!-- CTO Frameworks -->
    <workstation-researcher-frameworks ng-if="ctrl.tab == 'frameworks'"></workstation-researcher-frameworks>

    <!-- Marketer -->
    <workstation-marketer ng-if="ctrl.tab == 'marketer'"></workstation-marketer>

    <!-- Stats -->
    <workstation-stats ng-if="ctrl.tab == 'stats'"></workstation-stats>

    <!-- Schedule -->
    <workstation-schedule ng-if="ctrl.tab == 'schedule'"></workstation-schedule>
</div>