<div id="career_vision">
<fieldset ng-disabled="
(!(state == 3 && isAppraisee) || dateNow > TapsstateList[3].dateend)
&& (!(state == 4 && approverLevel == 1) || dateNow > TapsstateList[4].dateend)
&& (!(state == 5 && approverLevel == 2) || dateNow > TapsstateList[5].dateend)
">
<form name="myForm">
<br/>
<div class="row">
<div class="col-md-12" ><strong>4.1 Career goals, mobility and foreign language ability</strong></div>
</div>
<table class="table table-bordered">
<col width="70%" />
<col width="30%" />
<tr>
<th class="bluehead" colspan="2">Career Goals</th>
</tr>
<tr class="more-data-lg">
<td colspan="2" style="vertical-align:top !important;">
<strong>Employee's short term career goals (1-3 yrs)</strong>
<br/>
<textarea style="width:100%;height:100px;" ng-model='CareerGoals.ShortTermGoal' ng-disabled="!isAppraisee"></textarea>
</td>
</tr>
<tr class="more-data-lg">
<td colspan="2" style="vertical-align:top !important;">
<strong>Employee's long term goals</strong>
<br/>
<textarea style="width:100%;height:100px;" ng-model='CareerGoals.LongTermGoal' ng-disabled="!isAppraisee"></textarea>
</td>
</tr>
<!-- <tr class="more-data-lg" ng-if="state == 4 && isAppraiser || state > 4 "> -->
<tr class="more-data-lg" ng-if="state <=4 || (state >4 && isAppraiser)">
<td colspan="2" style="vertical-align:top !important;">
<strong>Appraiser's Comment</strong>
<br/>
<textarea style="width:100%;height:100px;" ng-model='CareerGoals.Career_Comment' ng-disabled="!isAppraiser"></textarea>
</td>
</tr>
<tr>
<th class="bluehead" colspan="2">Geographical Mobility</th>
</tr>
<tr class="more-data-lg">
<td style="vertical-align:top !important;">
Willingness to: *If yes, tick on either 1 year or 3 years.
<br/><br/>
<fieldset ng-disabled="!isAppraisee">
<div class="row">
<div class="col-md-3" >Domestic mobility:</div>
<div class="col-md-9" >
<input type="radio" name="domestic_radio" ng-model="CareerGoals.Domestic_Mobility" value="1" />Yes
(Within
<input type="radio" name="domestic_y" ng-model="CareerGoals.Domestic_Mobility" value="2"/> 1 Year
<input type="radio" name="domestic_y" ng-model="CareerGoals.Domestic_Mobility" value="3"/> 3 Years )
<input type="radio" name="domestic_radio" ng-model="CareerGoals.Domestic_Mobility" value="0" /> No
</div>
</div>
<br/><br/>
<div class="row">
<div class="col-md-3" >International mobility:</div>
<div class="col-md-9" >
<input type="radio" name="inter_radio" ng-model="CareerGoals.International_Mobility" value="1" />Yes
(Within
<input type="radio" name="inter_y" ng-model="CareerGoals.International_Mobility" value="2"/> 1 Year
<input type="radio" name="inter_y" ng-model="CareerGoals.International_Mobility" value="3"/> 3 Years )
<input type="radio" name="inter_radio" ng-model="CareerGoals.International_Mobility" value="0" /> No
</div>
</div>
</fieldset>
</td>
<td style="vertical-align:top !important;">
<fieldset ng-disabled="!isAppraisee">
<div class="row">
<div class="col-md-12" >
Please indicate here your foreign<br/>
language ability<br/>
</div>
</div>
<div class="row">
<div class="col-md-1" ><!-- <input type="checkbox" ng-checked="check_Language" /> --></div>
<div class="col-md-4" >Language</div>
<div class="col-md-3" >Level</div>
<div class="col-md-4" >Score</div>
</div>
<div class="row" ng-repeat="item in CareerLanguage | filter:{isDelete:false}" style="padding-bottom:5px;">
<div class="col-md-1" ><input type="checkbox" ng-checked="check_Language" value="{{$index}}" ng-model="item.isChecked" /></div>
<div class="col-md-4" ><input type="text" style="width:90%;" ng-model="item.language" value="{{ item.language }}"/></div>
<div class="col-md-3" >
<select ng-model="item.level">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
<div class="col-md-4" ><input type="text" style="width:90%;" ng-model="item.score" value="{{ item.score }}"/></div>
</div>
<br/>
<div class="row" ng-if="isAppraisee && state == 3">
<div class="col-md-12" style="text-align:center;">
<button type="button" class="btn btn-success" ng-click="addRowLanguage()">Add</button>
<button type="button" class="btn btn-danger" ng-click="delRow(CareerLanguage)">Delete</button>
</div>
</div>
* Level:<br/>
[A](good to communicate in any situation),<br/>
[B](enough in business situation),<br/>
[C](enough in everyday)
</fieldset>
</td>
</tr>
<tr class="more-data-lg">
<td colspan="2" style="vertical-align:top !important;">
<strong>Appraisee's Comment</strong>
<br/>
<textarea style="width:100%;height:100px;" ng-model='CareerGoals.Mobility_Comment' ng-disabled="isAppraiser"></textarea>
</td>
</tr>
</table>
<fieldset ng-disabled="!isAppraisee">
<div class="row">
<div class="col-md-12" >
<strong>4.2 Individual development plan</strong>
<br/>
<strong>4.2.1 CK Leadership Competency items</strong>
<span class="tab" style="padding-left:5px;">
Discuss and prioritize development opportunities identified from CKLC and/or in relation with Career goals<br/>
expressed above.<br/>
Up to 3 development opportunities to be identified per year. Then for each development opportunity:<br/>
1- Jointly identify the related competency by refering to the CKLC description.<br/>
2- Jointly define an action and timeframe considering all options<br/>
(training, job enhancement, project involvement, coaching, etc)
</span>
</div>
</div>
<br/>
<table class="table table-bordered">
<col width="3%" />
<col width="20%" />
<col width="13%" />
<col width="32%" />
<col width="32%" />
<tr>
<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_CK" /> --></th>
<th class="bluehead bold-center" >Development<br/>opportunities</th>
<th class="bluehead bold-center" >CKLC</th>
<th class="bluehead bold-center" >Action</th>
<th class="bluehead bold-center" >Timeframe</th>
</tr>
<tr ng-repeat="item in CareerCk | filter:{isDelete:false}" class="more-data-sm">
<td><input type="checkbox" ng-checked="check_CK" value="{{ item.idx }}" ng-model="item.isChecked" /></td>
<td><textarea class="text-sm" ng-model="item.dev_oppo" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.cklc" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.action" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.timeframe" ></textarea></td>
</tr>
</table>
<div class="row" ng-if="isAppraisee && state == 3">
<div class="col-md-12" style="text-align:center;">
<button type="button" class="btn btn-success" ng-click="addRowCK()">Add 4.2.1</button>
<button type="button" class="btn btn-danger" ng-click="delRow(CareerCk)">Delete 4.2.1</button>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12" >
<strong>4.2.2 Expertise area</strong><br/>
*Input free comments on your strength and development opportunities except for the issues written above,<br/>
if any. (5 items at maximum) If you have Expertise Area, input the comment based on assessment items.
</div>
</div>
<table class="table table-bordered">
<col width="3%" />
<col width="20%" />
<col width="13%" />
<col width="32%" />
<col width="32%" />
<tr>
<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_Expertise" /> --></th>
<th class="bluehead bold-center" >Development<br/>opportunities</th>
<th class="bluehead bold-center" >Expertise area</th>
<th class="bluehead bold-center" >Action</th>
<th class="bluehead bold-center" >Timeframe</th>
</tr>
<tr ng-repeat="item in CareerExpertiseArea | filter:{isDelete:false}" class="more-data-sm">
<td><input type="checkbox" ng-checked="check_Expertise" value="{{ item.idx }}" ng-model="item.isChecked" /></td>
<td><textarea class="text-sm" ng-model="item.dev_oppo" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.expertise_area" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.action" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.timeframe" ></textarea></td>
</tr>
</table>
<div class="row" ng-if="isAppraisee && state == 3">
<div class="col-md-12" style="text-align:center;">
<button type="button" class="btn btn-success" ng-click="addRowExpertise()">Add 4.2.2</button>
<button type="button" class="btn btn-danger" ng-click="delRow(CareerExpertiseArea)">Delete 4.2.2</button>
</div>
</div>
<div class="row">
<div class="col-md-12" >
<strong>4.3 Other individual development plan</strong><br/>
Input your individual development plan(eg. Training opportunities) up to 3 items if any.
</div>
</div>
<table class="table table-bordered">
<col width="3%" />
<col width="65%" />
<col width="32%" />
<tr>
<th class="bluehead bold-center" ><!-- <input type="checkbox" ng-checked="check_Other" /> --></th>
<th class="bluehead bold-center" >Training needs</th>
<th class="bluehead bold-center" >Timeframe</th>
</tr>
<tr ng-repeat="item in CareerOther | filter:{isDelete:false}" class="more-data-sm">
<td><input type="checkbox" ng-checked="check_Other" value="{{ item.idx }}" ng-model="item.isChecked" /></td>
<td><textarea class="text-sm" ng-model="item.training_needs" ></textarea></td>
<td><textarea class="text-sm" ng-model="item.timeframe" ></textarea></td>
</tr>
</table>
<div class="row" ng-if="isAppraisee && state == 3">
<div class="col-md-12" style="text-align:center;">
<button type="button" class="btn btn-success" ng-click="addRowOther()">Add 4.3</button>
<button type="button" class="btn btn-danger" ng-click="delRow(CareerOther)">Delete 4.3</button>
</div>
</div>
</fieldset>
<div class="row">
<div class="col-md-12" >
<strong>4.4 Comments</strong><br/>
• Appraisee's comment<br/>
<textarea style="width:100%;height:150px;" ng-model="CareerApsComment.mbo_career_appraiser_comment" ng-disabled="isAppraiser"></textarea><br/>
<div ng-if="state == 4 && isAppraiser || state > 4 ">
<span ng-if="state <=4 || (state >4 && isAppraiser)">• Appraiser's comment on the Career vision expressed by the appraisee<br/></span>
<!-- <textarea style="width:100%;height:150px;" ng-model="CareerApsComment.mbo_career_appraisee_comment"></textarea> -->
<textarea style="width:100%;height:150px;" ng-model="CareerApsComment.mbo_career_appraisee_comment" ng-if="state <=4 || (state >4 && isAppraiser)"></textarea>
</div>
</div>
</div>
<br/>
<!-- <div class="row">
<div class="col-md-12" style="text-align:center;padding-bottom:20px;">
<button type="button" class="btn btn-primary" ng-click="save()">Save Draft</button>
</div>
</div> -->
<div class="row">
<div class="col-md-12" style="text-align:center;">
<button type="button" class="btn btn-primary" ng-if="(state == 3 && isAppraisee) || (state == 4 && approverLevel == 1) || (state == 5 && approverLevel == 2)" ng-click="save()">Save Draft</button>
<button type="button" class="btn btn-success" ng-if=" isAppraisee && state == 3 " ng-click="Next()">Send To Appraiser</button>
<button type="button" class="btn btn-success" ng-if=" (state == 4 && approverLevel == 1) || (state == 5 && approverLevel == 2) " ng-click="Next()">Assessment completed</button>
</div>
</div>
</form>
</fieldset>
</div>