{{!-- Skills --}}
<div class="border-box content-box no-small-boxes skills-box margin-right-3">
	<div class="box-inner no-padding">
		<div class="skills-header table-header">
			{{#ifCond system.skillPoints.skill.left '!==' 0}}
			<div class="points-left letter-circle-icon small" title="{{localize 'dc20rpg.sheet.skills.pointsLeft'}}">
				<span>{{system.skillPoints.skill.left}}</span>
			</div>	
			{{/ifCond}}
			<span class="title">{{localize 'dc20rpg.sheet.skills.skillsTitle'}}</span>
			<div class="menu">
				<div class="buttons">
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.convertToTrade'}}">
						<a class="skill-point-converter" data-from="skill" data-to="trade" data-operation="convert" data-rate="2">T</a>
					</div>
					{{#if editMode}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.addSkill'}}">
						<a class="add-skill fa-solid fa-plus fa-lg"></a>
					</div>
					{{/if}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.showHideUnknown'}}">
						{{{show-hide-toggle flags.dc20rpg.showUnknownSkills "flags.dc20rpg.showUnknownSkills"}}}
					</div>
				</div>
			</div>
		</div>
		<div class="skills">
			{{#each skills.skills as |skill key|}}
			{{#ifCond skill.mastery '||' @root.flags.dc20rpg.showUnknownSkills}}
			<div class="table-row skill-row journal-tooltip" data-header="{{skill.label}}" data-uuid="{{labelFromKey key @root.config.SYSTEM_CONSTANTS.JOURNAL_UUID.skillsJournal}}">
				<a class="expertise-toggle {{#unless skill.expertise}}inactive{{/unless}}" data-type="skills" data-key="{{key}}" title="{{localize 'dc20rpg.sheet.skills.expertise'}}">E</a>
				<div class="skill-mastery">
					<div class="letter-circle-icon small clickable" title="{{skill.masteryLabel}}">
						<a class="skill-mastery-toggle" data-type="skills" data-key="{{key}}">{{skill.short}}</a>
					</div>
				</div>
				<select class="base-attribute {{#if @root.editMode}}pointer{{/if}}" {{#unless @root.editMode}}disabled{{/unless}}
					name="system.skills.{{key}}.baseAttribute" title="{{localize 'dc20rpg.sheet.skills.baseAttribute'}}">
					{{selectOptions @root.config.DROPDOWN_DATA.shortAttributes selected=skill.baseAttribute}}
				</select>
				<input {{#ifCond skill.custom '&&' @root.editMode}}{{else}}disabled{{/ifCond}} class="name" type="text" name="system.skills.{{key}}.label" value="{{skill.label}}" title="{{skill.label}}">
				<div class="modifier"><input disabled value="{{skill.modifier}}"/></div>
				<a class="rollable fa-solid fa-dice-d20 fa-lg" title="{{localize 'dc20rpg.sheet.skills.roll'}}"
					data-roll="d20+@skills.{{key}}.modifier" data-label="{{skill.label}} {{localize "dc20rpg.rollType.check"}}"
					data-type="skillCheck" data-check-key="{{key}}"></a>
				{{#ifCond skill.custom '&&' @root.editMode}}
				<div class="letter-circle-icon small clickable remove" title="{{localize 'dc20rpg.sheet.skills.removeSkill'}}">
					<a class="remove-skill" data-key="{{key}}">X</a>
				</div>
				{{/ifCond}}
			</div>
			{{/ifCond}}
			{{/each}}
		</div>
	</div>
</div>

{{!-- Trade Skills --}}
<div class="border-box content-box no-small-boxes skills-box margin-right-3 margin-top-5">
	<div class="box-inner no-padding">
		<div class="skills-header table-header">
			{{#ifCond system.skillPoints.trade.left '!==' 0}}
			<div class="points-left letter-circle-icon small" title="{{localize 'dc20rpg.sheet.skills.pointsLeft'}}">
				<span>{{system.skillPoints.trade.left}}</span>
			</div>
			{{/ifCond}}
			<span class="title">{{localize 'dc20rpg.sheet.skills.tradeTitle'}}</span>
			<div class="menu">
				<div class="buttons">
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.convertToLanguage'}}">
						<a class="skill-point-converter" data-from="trade" data-to="language" data-operation="convert" data-rate="2">L</a>
					</div>
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.revertToSkill'}}">
						<a class="skill-point-converter fa-solid fa-left" data-from="trade" data-to="skill" data-operation="revert" data-rate="2"></a>
					</div>
					{{#if editMode}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.addTradeSkill'}}">
						<a class="add-trade fa-solid fa-plus fa-lg"></a>
					</div>
					{{/if}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.showHideUnknown'}}">
						{{{show-hide-toggle flags.dc20rpg.showUnknownTradeSkills "flags.dc20rpg.showUnknownTradeSkills"}}}
					</div>
				</div>
			</div>
		</div>
		<div class="skills">
			{{#each skills.trade as |skill key|}}
			{{#ifCond skill.mastery '||' @root.flags.dc20rpg.showUnknownTradeSkills}}
			<div class="table-row skill-row journal-tooltip" data-header="{{skill.label}}" data-uuid="{{labelFromKey key @root.config.SYSTEM_CONSTANTS.JOURNAL_UUID.tradeSkillsJournal}}">
				<a class="expertise-toggle {{#unless skill.expertise}}inactive{{/unless}}" data-type="tradeSkills" data-key="{{key}}" title="{{localize 'dc20rpg.sheet.skills.expertise'}}">E</a>
				<div class="skill-mastery">
					<div class="letter-circle-icon small clickable" title="{{skill.masteryLabel}}">
						<a class="skill-mastery-toggle" data-type="tradeSkills" data-key="{{key}}">{{skill.short}}</a>
					</div>
				</div>
				<select class="base-attribute {{#if @root.editMode}}pointer{{/if}}" {{#unless @root.editMode}}disabled{{/unless}}
					name="system.tradeSkills.{{key}}.baseAttribute" title="{{localize 'dc20rpg.sheet.skills.baseAttribute'}}">
					{{selectOptions @root.config.DROPDOWN_DATA.shortAttributes selected=skill.baseAttribute}}
				</select>
				<input {{#ifCond skill.custom '&&' @root.editMode}}{{else}}disabled{{/ifCond}} class="name" type="text" name="system.tradeSkills.{{key}}.label" value="{{skill.label}}" title="{{skill.label}}">
				<div class="modifier"><input disabled value="{{skill.modifier}}"/></div>
				<a class="rollable fa-solid fa-dice-d20 fa-lg" title="{{localize 'dc20rpg.sheet.skills.roll'}}"
					data-roll="d20+@tradeSkills.{{key}}.modifier" data-label="{{skill.label}} {{localize "dc20rpg.rollType.check"}}"
					data-type="skillCheck" data-check-key="{{key}}"></a>
				{{#ifCond skill.custom '&&' @root.editMode}}
				<div class="letter-circle-icon small clickable remove" title="{{localize 'dc20rpg.sheet.skills.removeTradeSkill'}}">
					<a class="remove-trade" data-key="{{key}}">X</a>
				</div>
				{{/ifCond}}
			</div>
			{{/ifCond}}
			{{/each}}
		</div>
	</div>
</div>	

{{!-- Languages --}}
<div class="border-box content-box no-small-boxes skills-box margin-right-3 margin-top-5">
	<div class="box-inner no-padding">
		<div class="skills-header table-header">
			{{#ifCond system.skillPoints.language.left '!==' 0}}
			<div class="points-left letter-circle-icon small" title="{{localize 'dc20rpg.sheet.skills.pointsLeft'}}">
				<span>{{system.skillPoints.language.left}}</span>
			</div>
			{{/ifCond}}
			<span class="title">{{localize 'dc20rpg.sheet.skills.languageTitle'}}</span>
			<div class="menu">
				<div class="buttons">
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.revertToTrade'}}">
						<a class="skill-point-converter fa-solid fa-left" data-from="language" data-to="trade" data-operation="revert" data-rate="2"></a>
					</div>
					{{#if editMode}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.addLanguage'}}">
						<a class="add-language fa-solid fa-plus fa-lg"></a>
					</div>
					{{/if}}
					<div class="letter-circle-icon clickable small" title="{{localize 'dc20rpg.sheet.skills.showHideUnknown'}}">
						{{{show-hide-toggle flags.dc20rpg.showUnknownLanguages "flags.dc20rpg.showUnknownLanguages"}}}
					</div>
				</div>
			</div>
		</div>
		<div class="skills">
			{{#each skills.languages as |skill key|}}
			{{#ifCond skill.mastery '||' @root.flags.dc20rpg.showUnknownLanguages}}
			<div class="table-row skill-row journal-tooltip" data-header="{{skill.label}}" data-uuid="{{labelFromKey key @root.config.SYSTEM_CONSTANTS.JOURNAL_UUID.languagesJournal}}">
				<div class="skill-mastery">
					<div class="letter-circle-icon small clickable" title="{{skill.masteryLabel}}">
						<a class="language-mastery-toggle" data-path="system.languages.{{key}}.mastery">{{skill.short}}</a>
					</div>
				</div>
				<input {{#ifCond skill.custom '&&' @root.editMode}}{{else}}disabled{{/ifCond}} class="name" type="text" name="system.languages.{{key}}.label" value="{{skill.label}}" title="{{skill.label}}">
				{{#ifCond skill.mastery '===' 1}}
				<a class="rollable fa-solid fa-dice-d20 fa-lg" data-type="lang" data-check-key="lang" data-roll="d20 + max(@int, @cha)" data-label="{{skill.label}} {{localize "dc20rpg.rollType.check"}}" title="{{localize 'dc20rpg.sheet.skills.roll'}}"></a>
				{{/ifCond}}
				{{#ifCond skill.custom '&&' @root.editMode}}
				<div class="letter-circle-icon small clickable remove" title="{{localize 'dc20rpg.sheet.skills.removeLanguage'}}">
					<a class="remove-language" data-key="{{key}}">X</a>
				</div>
				{{/ifCond}}
			</div>
			{{/ifCond}}
			{{/each}}
		</div>
	</div>
</div>	