Screen{"Edit Company Role": screenType => Edit, showCancel => {true: nextPage => "Search Company Role"}, showSave => {true: nextPage => "Search Company Role"},
	cssIncludes => ["css/jquery.switchButton.css", "css/companyStyles.css", "css/editCompanyRole.css"], scriptIncludes => ["scripts/jquery.switchButton.js", "scripts/editCompanyRole.js"]
	
	
	
	Panel{"": Columns[1,3,1,3,1,3]
		PanelRow{
			LabelToString{"Role": value => "Senior Project Manager"},
			LabelToString{"Profile": value => "Executive Management"},
			LabelCheckbox{"Status": CssClass => "switchCheckbox", staticEnumDataNote => "Open, Close", checked => true}
		}
		PanelRow{
			LabelToString{"Duration": value => "1.58 Hrs (90 mins)"}
			
		}
	}
	
	Tab{"Candidates":
		Panel{"": Columns[2,4,2,4]
			PanelRow{
				PanelCell{colspan => 4
					ButtonGroupRadio{"CandidateStage": CssClass => "btn-breadcrumb", value => "All: 135", 
						dataNotes => "These are the workflow stages of the role<br/>
										Show no of candidates at each stage",
						options => ["All: 135", "Skills Self Assessment: 70", "Apollo Full: 30", "Apollo Culture: 20", "Phone Interview: 10", "In Person Interview: 5"]
					}					
				}
			}
			PanelRow{
				Button{"Advanced ": buttonStyle => Link, style => "float:left;",
					icons=> [
						{"glyphicon glyphicon-menu-down":}
					], requirement => "when clicked show the advanced filter field below"
				}
			}
			PanelRow{
				Select{"": options => ["Candidate Enrolled", "Last Active"]},
				Date{"":},
				LabelDate{"To":}
			}
			PanelRow{
				LabelField{"Candidate Name": style => "width:80%;", requirement => "Search for Candidate Firstname, Middle Name, Last name and Preferred name"},
				PanelCell{colspan => 1},
				Button{"Filter": buttonStyle => Default}
			}
			PanelRow{
				PanelCell{colspan => 4}
			}
		}
		Table{"": showTitle => false
			Col{"": filter => false, sorting => false, width => 1, requirement => "Provide a select all check box"}
			Col{"Candidate Name": width => 16}
			Col{"Enrolled Date": width => 8}
			Col{"Skills Self Assessment": width => 8}
			Col{"Apollo Full": width => 8}
			Col{"Apollo Culture": width => 8}
			Col{"Phone Interview": width => 8}
			Col{"In Person Interview": width => 8}
			Col{"Last Active": width => 8}
			
			TableRow{
				Label{"": requirement => "The checkbox is not shown, because the candidate has not qualified for the phone / in person interview"}
				Link{"Angus N George": nextPage => "View Candidate Result"}
				Date{"": value => "10/03/2017", readOnly => true}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"76": requirement => "The overall suitability score earned by the candidate<br/>
												use the traffic light colours to indicate suitability"}					
				}
				TableCell{colspan => 1, style => "background-color:#ffff78;"
					Label{"52":}
				}
				TableCell{colspan => 1, style => "background-color:indianred;"
					Label{"40":}
				}
				Label{"": requirement => "This candidate has not been selected because he has not scored adequately to be selected for the next stage, so the Phone Interview status is not shown"}
				TableCell{colspan => 1}
				Date{"": value => "12/03/2017", readOnly => true}
			}
			TableRow{
				Checkbox{"":}
				Link{"Elizabeth H Praed": nextPage => "View Candidate Result"}
				Date{"": value => "09/03/2017", readOnly => true}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"90":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"80":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"87":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"74":}
				}
				Label{"Not Invited yet":}
				Date{"": value => "13/03/2017", readOnly => true}
			}
		}
	}
	
	Tab{"Role Summary":
		Table{"": showTitle => false, CssClass => "table table-condensed table-noheader"
			Col{"": filter => false, sorting => false, width => 1}
			Col{"": filter => false, sorting => false, width => 30}
			Col{"": filter => false, sorting => false, width => 10}
			Col{"": filter => false, sorting => false, width => 1}
			
			TableRow{
				TableCell{colspan => 2
					Label{"Skills Self Assessment":}
				}
				Label{"Duration: 15 mins":}
				GlyphsIcon{"": iconSize => glyphiconLg, 
					requirement => "Expand / collapse the panel below<br/>
									Only one panel can be expanded at a time",
					icons=> [
						{"glyphicon-chevron-down": style => "padding-top: 4px;"}
					]
				}
			}
			TableRow{
				TableCell{colspan => 1}
				TableCell{colspan => 3
					Panel{"": Columns[2,3,1,2,3,1]
						PanelRow{
							Label{"Essential Skills": style => "font-weight:bold;"},
							Label{"Knowledge in Project Management Tools such as MS Project":},
							Label{"Expert": requirement => "Show the Essential Skills recorded and their Level"},
							Label{"Desired Skills": style => "font-weight:bold;"},
							Label{"Wireframing Tools":},
							Label{"Proficient": requirement => "Show the Desired Skills recorded and their Level"}
						}
						PanelRow{
							Label{"Essential Qualifications": style => "font-weight:bold;"},
							PanelCell{colspan => 2
								Label{"Bachelor Degree in Information Technology": requirement => "Show the Essential Qualifications recorded"}							
							},
							Label{"Desired Qualifications": style => "font-weight:bold;"},
							PanelCell{colspan => 2
								Label{"Microsoft Certification: Managing Projects with Microsoft Project": requirement => "Show the Essential Qualifications recorded"}
							}
						}
					}
				}
			}
			TableRow{
				TableCell{colspan => 2
					Label{"Apollo Full":}
				}
				Label{"Duration: 30 mins":}
				GlyphsIcon{"": iconSize => glyphiconLg, 
					icons=> [
						{"glyphicon-chevron-down": style => "padding-top: 4px;"}
					]
				}
			}
			TableRow{
				TableCell{colspan => 1}
				TableCell{colspan => 3
					Panel{"": Columns[2,3,1,2,3,1]
						PanelRow{
							Label{"Career Drives": style => "font-weight:bold;"},
							Label{"Archivement":},
							Label{"Primary":},
							Label{"Coping": style => "font-weight:bold;"},
							Label{"Responsibility":},
							Label{"Primary":}
						}
						PanelRow{
							PanelCell{colspan => 1},
							Label{"Remuneration":},
							Label{"Secondary":},
							PanelCell{colspan => 1},
							Label{"Security":},
							Label{"Secondary":}
						}
						PanelRow{
							Label{"People Orientation": style => "font-weight:bold;"},
							Label{"Agreeable":},
							Label{"Secondary":},
							Label{"Workplace Management": style => "font-weight:bold;"},
							Label{"Self Organised":},
							Label{"Primary":}
						}
					}
				}
			}
			TableRow{
				TableCell{colspan => 2
					Label{"Apollo Culture":}
				}
				Label{"Duration: 15 mins":}
				GlyphsIcon{"": iconSize => glyphiconLg, 
					icons=> [
						{"glyphicon-chevron-right": style => "padding-top: 4px;"}
					]
				}
			}
			TableRow{
				TableCell{colspan => 2
					Label{"Phone Interview":}
				}
				Label{"Duration: 20 mins":}
				GlyphsIcon{"": iconSize => glyphiconLg, 
					icons=> [
						{"glyphicon-chevron-right": style => "padding-top: 4px;"}
					]
				}
			}
			TableRow{
				TableCell{colspan => 2
					Label{"In Person Interview":}
				}
				Label{"Duration: 15 mins":}
				GlyphsIcon{"": iconSize => glyphiconLg, 
					icons=> [
						{"glyphicon-chevron-right": style => "padding-top: 4px;"}
					]
				}
			}
		}
	}
	
	
}


Screen{"View Candidate Result":
	cssIncludes => ["css/companyStyles.css"]

	Button{"Close": nextPage => "Edit Company Role"}
	
	Panel{"": Columns[1,3,1,3,1,3]
		PanelRow{
			LabelToString{"Candidate": value => "Ms. Elizabeth Harriet Praed (Liz)", formattingNotes => "{Salutation} {firstname} {middle name} {Lastname ({Preferred Name})"},
			LabelToString{"Current Stage": value => "Phone Interview (74)", style => "color:green;",
				formattingNotes => "{Last Completed Stage} ({score of the state})", requirement => "the colour of the text should match the traffic light colour based on the performance of the candidate at the current stage"
			},
			LabelDate{"Enrolled Date": value => "10/03/2017", readOnly => true}
		}
		PanelRow{
			LabelToString{"Mobile": value => "0404 877 522"},
			Label{"Email":},
			Link{"elizabeth@bigpond.com.au": requirement => "This is an Email to Link"},
			LabelDate{"Last Active": value => "13/03/2017", readOnly => true}
		}
	}
	
	Tab{"Profile":
		Panel{"": Columns[2,4,2,4]
			PanelRow{
				LabelToString{"Address": value => "39 Loris Way"},
				LabelToString{"Suburb": value => "Arthur River, WA 6315"}
			}
		}
		Table{"Progress": showTitle => true
			Col{"Skills Self Assessment": filter => false, sorting => false, width => 6}
			Col{"Apollo Full": filter => false, sorting => false, width => 6}
			Col{"Apollo Culture": filter => false, sorting => false, width => 6}
			Col{"Phone Interview": filter => false, sorting => false, width => 6}
			Col{"In Person Interview": filter => false, sorting => false, width => 6}
			
			TableRow{
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"90":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"80":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"87":}
				}
				TableCell{colspan => 1, style => "background-color:lightgreen;"
					Label{"74":}
				}
				Label{"Not Invited yet": style => "font-style:italic;",
					requirement => "This appears for Phone & In person Interviews only<br/>
										It indicates the different status of Phone / Interview<br/>
										The statuses are as follows<br/>
										- Not Invited yet - This indicates that the invitation has not been sent to the candidate.<br/>
										- Invitation Sent - This indicates that the invitation has been sent to the candidate but has not scheduled the session yet<br/>
										- Session Scheduled - This indicates that the candidate has scheduled the session, Show the scheduled date time within brackets<br/>
										When the session is scored, the score with appear with the traffic light colours<br/>
"
				}
			}
		}
	}
	
	TabGroup{"Assessments":
		Tab{"Skills Assessment":
			Table{"": showTitle => false
				Col{"": filter => false, sorting => false, width => 20}
				Col{"": filter => false, sorting => false, width => 20}
			}
		}		
	}
	
}