:: characterOverview_skills[menu]
	<<gs 'characterOverviewNavigation' 'skills'>>
	<h2>Skills</h2>
	<<set _skills = Object.entries($pc.skillsAll).map((s=>Object.assign({skillData:setup.Skill.get(s[0])},{id:s[0]},s[1]))).sort((a,b)=>a.skillData.label > b.skillData.label ? 1 : -1)>>
	<div id="skillOverview">
		<<for _skill range _skills>>
			<<set _skillId = _skill.id>>
			<<set _skillData = _skill.skillData>>
			<<if _skillData.hidden !== true>>
				<<set _diagramDOMId = 'skillDiagram_'+_skillId>>
				<<set _detailsDOMId = "skillDetails_"+_skillId>>
				<<capture _skillId,_diagramDOMId, _detailsDOMId>>

					<div class="skill">
						<<link _skillData.label>>
							<<replace `'#'+_diagramDOMId`>>
								<<skillHistoryDiagram _skillId>>
							<</replace>>
							<<addclass `'#'+_diagramDOMId` 'visible'>>
							<<addclass `'#'+_detailsDOMId` 'visible'>>
						<</link>>
						<span class="label"><<=_skillData.label>></span>
						/*<span class="level"><<=_skill.level>></span>
						<span class="experience"><<=Math.floor(_skill.experience)>></span>*/

						<<set _levelCategory = Math.floor(_skill.level / 10)>>
						
						<span @class='"skillLevelCategory levelCategory_"+_levelCategory'>
							<<switch _levelCategory>>
								<<case 0>>
									Unexperienced
								<<case 1>>
									Novice
								<<case 2>>
									Beginner
								<<case 3>>
									Intermediate
								<<case 4>>
									Proficient
								<<case 5>>
									Specialist
								<<case 6>>
									Professional
								<<case 7>>
									Expert
								<<case 8>>
									Master
								<<case 9>>
									Renowned Master
								<<case 10>>
									Famous Master
							<</switch>>
						</span>

						<div class="skillDetails" @id='_detailsDOMId'>
							<<set _expForLCStart = $pc.skill_lvl2exp(_skillId,_levelCategory*10)>>
							<<set _expForLCEnd = $pc.skill_lvl2exp(_skillId,(_levelCategory+1)*10)>>
							<<set _percentage = (_skill.experience - _expForLCStart) / (_expForLCEnd - _expForLCStart) * 100>>
							<div @class='"experienceBar levelCategory_"+_levelCategory' @style='"--percentage:"+ _percentage+"%"'>
								Level _skill.level (<<=Math.floor(_skill.experience)>> exp.)
							</div>

							<<if _skillData.image>>
								<<image _skillData.image>>
							<</if>>
							<<if _skillData.description>>
								<p>
									_skillData.description
								</p>
							<</if>>
							<<if _skillData.descibtionByLevel && _skillData.descibtionByLevel[_levelCategory]>>
								<p>
									_skillData.descibtionByLevel[_levelCategory]
								</p>
							<</if>>
						</div>

						<div class="diagramArea" @id='_diagramDOMId'></div>

						<<debug>>
							<<set _cheatSkill ??= {}>>
							<<set _cheatSkill[_skillId] = _skill.level>>
							<<numberbox "_cheatSkill[_skillId]" _cheatSkill[_skillId]>>
							<<button 'Confirm'>>
								<<run $pc.skillSetLevel(_skillId,_cheatSkill[_skillId])>>
								<<gt 'characterOverview_skills'>>
							<</button>>
						<</debug>>
					</div>
				<</capture>>
				
			<</if>>
		<</for>>
	</div>
