<form id="advancement-dialog" class="dialog-v2">
  {{!-- Display Tips --}}
  <div class="display-tips">
    {{#each tips}}
    <div class="tip margin-top-3">
      <img src="{{img}}"/>
      <div class="tip-value">
        <p>{{tip}}</p>
      </div>
    </div>
    {{/each}}
  </div>
  {{#if applyingAdvancement}}<div class="applying-advancement-overlay"><span>{{localize "dc20rpg.dialog.advancement.applyingAdvancement"}}</span></div>{{/if}}
  {{PARTIAL "Tooltip"}}
  <div class="wrapper">
    {{!-- Scaling Resources Progress --}}
    {{#if showScaling}}
    <div class="content scaling-values-content">
      <div class="header"><span>{{localize "dc20rpg.dialog.advancement.title"}}</span></div>

      {{#each scalingValues}}
      <div class="scaling-value-row">
        <label>{{label}}</label>
        <div class="progress">
          <span>{{previous}}</span>
          <i class="fa-lg fa-solid fa-circle-right"></i>
          <span>{{current}}</span>
        </div>
      </div>
      {{/each}}

      {{!-- Attributes and Saves --}}
      <div class="header margin-top-15"><span>{{localize "dc20rpg.dialog.advancement.spendPoints"}}</span></div>
      <div class="attr-wrapper grid grid-4col">
        {{#each attributes as |atr key|}}{{#ifCond key '!==' "prime"}}
        <div class="attr" title="{{varLocalize 'dc20rpg.attributes.' key ''}}">
          <div class="atr-name">
            <label>{{key}}</label>
          </div>
          <div class="value">
            <input disabled class="input" type="number" value="{{atr.value}}" data-dtype="Number">
          </div>
          <div class="buttons">
            <a class="sub-attr" data-key="{{key}}"><i class="fa-solid fa-square-minus"></i></a>
            <a class="add-attr" data-key="{{key}}"><i class="fa-solid fa-square-plus"></i></a>
          </div>
        </div>
        {{/ifCond}}{{/each}}
      </div>
      {{#if attributePoints.left}}
      <div class="point-spend-row">
        <label>{{localize 'dc20rpg.sheet.attributes.pointsLeft'}}</label>
        <div class="progress">
          <span>{{attributePoints.left}}</span>
        </div>
      </div>
      {{/if}}

      {{!-- Skills --}}
      <div class="header margin-top-15"><span>{{localize "dc20rpg.dialog.advancement.spendSkillPoints"}}</span></div>
      <div class="table grid grid-4col">
        {{#each skills as |skill key|}}
        <a class="skill-mastery skill-mastery-toggle {{#ifCond masteryLimit '===' mastery}}maximum{{/ifCond}} {{#ifCond @root.skillPoints.skill.left '<=' 0}}maximum{{/ifCond}}" data-type="skills" data-key="{{key}}">
          <label>{{skill.label}}</label>
          <span>{{skill.masteryLabel}}</span>
        </a>
        {{/each}}
      </div>
      {{#if skillPoints.skill.left}}
      <div class="point-spend-row">
        <label>{{localize 'dc20rpg.dialog.skill.pointsLeft'}}</label>
        <div class="spender-wrapper">
          <a class="skill-point-converter" data-from="skill" data-to="trade" data-operation="convert" data-rate="2" title="{{localize "dc20rpg.sheet.skills.convertToTrade"}}">T</a>
          <div class="progress">
            <span>{{skillPoints.skill.left}}</span>
          </div>
        </div>
      </div>
      {{/if}}

      {{!-- Trade --}}
      <div class="header margin-top-15"><span>{{localize "dc20rpg.dialog.advancement.spendTradePoints"}}</span></div>
      <div class="table grid grid-4col">
        {{#each tradeSkills as |skill key|}}
        <a class="skill-mastery skill-mastery-toggle {{#ifCond masteryLimit '===' mastery}}maximum{{/ifCond}} {{#ifCond @root.skillPoints.trade.left '<=' 0}}maximum{{/ifCond}}" data-type="tradeSkills" data-key="{{key}}">
          <label>{{skill.label}}</label>
          <span>{{skill.masteryLabel}}</span>
        </a>
        {{/each}}
      </div>
      {{#if skillPoints.trade.left}}
      <div class="point-spend-row">
        <label>{{localize 'dc20rpg.dialog.trade.pointsLeft'}}</label>
        <div class="spender-wrapper">
          <a class="skill-point-converter" data-from="trade" data-to="language" data-operation="convert" data-rate="2" title="{{localize "dc20rpg.sheet.skills.convertToLanguage"}}">L</a>
          <a class="skill-point-converter fa-solid fa-left" data-from="trade" data-to="skill" data-operation="revert" data-rate="2" title="{{localize "dc20rpg.sheet.skills.revertToSkill"}}"></a>
          <div class="progress">
            <span>{{skillPoints.trade.left}}</span>
          </div>
        </div>
      </div>
      {{/if}}

      {{!-- Languange --}}
      <div class="header margin-top-15"><span>{{localize "dc20rpg.dialog.advancement.spendLanguagePoints"}}</span></div>
      <div class="table grid grid-4col">
        {{#each languages as |skill key|}}
        <a class="skill-mastery language-mastery-toggle {{#ifCond masteryLimit '===' mastery}}maximum{{/ifCond}} {{#ifCond @root.skillPoints.language.left '<=' 0}}maximum{{/ifCond}}" data-path="system.languages.{{key}}.mastery">
          <label>{{skill.label}}</label>
          <span>{{skill.masteryLabel}}</span>
        </a>
        {{/each}}
      </div>
      {{#if skillPoints.language.left}}
      <div class="point-spend-row">
        <label>{{localize 'dc20rpg.dialog.language.pointsLeft'}}</label>
        <div class="spender-wrapper">
          <a class="skill-point-converter fa-solid fa-left" data-from="language" data-to="trade" data-operation="revert" data-rate="2" title="{{localize "dc20rpg.sheet.skills.revertToTrade"}}"></a>
          <div class="progress">
            <span>{{skillPoints.language.left}}</span>
          </div>
        </div>
      </div>
      {{/if}}
    </div>

    <div class="footer">
      <button class="close finish button margin-top-5">{{localize "dc20rpg.dialog.advancement.finish"}}</button>
    </div>
    {{else}}
    {{!-- Advancements Progress --}}
    <div class="content">
      <div class="title">
      {{#if customTitle}}
        <span class="margin-bottom-10">{{customTitle}}</span>
      {{else}}
        <span class="margin-bottom-5">{{localize "dc20rpg.dialog.advancement.features"}}</span>
      {{/if}}
      {{#if compendium}}<a class="open-compendium fa-lg fa-solid fa-book-atlas" data-item-type="{{compendium}}" data-selected="{{preFilters}}" title="{{localize "dc20rpg.sheet.openCompendium"}}"></a>{{/if}}
      </div>
      {{#if @root.mustChoose}}
        <div class="sub-title margin-top-5">{{localize "dc20rpg.dialog.advancement.choices"}}: {{@root.pointsLeft}}</div>
      {{/if}}

      <div class="item-list margin-top-10 actor-select {{#if @root.mustChoose}}multiple-choice{{/if}}">
        <div class="item-header">
          <div class="column name">
            <span class="margin-left-10" >{{localize "dc20rpg.dialog.advancement.table.itemName"}}</span>
          </div>
          {{#if @root.mustChoose}}
          <div class="column" title="{{localize "dc20rpg.dialog.advancement.table.cost"}}">
            <i class="fa-solid fa-coins"></i>
          </div>
          {{/if}}
          <div class="column" title="{{localize "dc20rpg.dialog.advancement.table.select"}}">
            <i class="fa-solid fa-check"></i>
          </div>
          <div class="column config">
            <i class="fa-solid fa-gear"></i>
          </div>
        </div>
        {{#each items as |item key|}}
        <div class="item-row">
          <div class="column name item-tooltip" data-item-key="{{key}}">
            <i class="item-img"><img src="{{item.img}}"/></i>
            <div class="item-name">{{name}}</div>
          </div>
          {{#if @root.mustChoose}}
            <div class="column quantity" title="{{localize "dc20rpg.dialog.advancement.table.pointsCost"}}">
              <input {{#unless item.removable}}disabled{{/unless}} class="numeric-input" type="number" value="{{item.pointValue}}" data-path="items.{{key}}.pointValue"/>
            </div>
            <div class="column config" title="{{localize "dc20rpg.dialog.advancement.table.select"}}">
              {{#if item.mandatory}}
              <i class="fa-solid fa-check-to-slot"></i>
              {{else}}
              <a class="activable {{#if item.selected}}fa-solid fa-square-check{{else}}fa-regular fa-square{{/if}}" data-path="items.{{key}}.selected"></a>
              {{/if}}
            </div>
          {{else}}
            <div class="column config" title="{{localize "dc20rpg.dialog.advancement.table.selected"}}">
              <i class="fa-solid fa-check-to-slot"></i>
            </div>
          {{/if}}
            <div class="column config">
              {{#if item.removable}}
              <a class="item-delete fas fa-trash" data-key="{{key}}" title="{{localize "dc20rpg.dialog.advancement.table.remove"}}"></a>
              {{/if}}
              {{#if item.canBeCounted}}
              <a class="activable fa-book {{#if item.ignoreKnown}}fa-solid{{else}}fa-regular{{/if}}" data-path="items.{{key}}.ignoreKnown" title="{{localize "dc20rpg.dialog.advancement.table.ignoreKnown"}}"></a>
              {{/if}}
            </div>
        </div>
        {{/each}}
      </div>
      {{#if @root.talent}}
        <div class="bellow-table">
          <div>{{localize "dc20rpg.dialog.advancement.givesTalent"}}</div>
        </div>
      {{else}}{{#if @root.allowToAddItems}}
        <div class="bellow-table">{{localize "dc20rpg.dialog.advancement.canAddItems"}}</div>
      {{/if}}{{/if}}
    </div>

    {{!-- Talent Mastery Picker --}}
    {{#if @root.talent}}
    <div class="talent-mastery-picker">
      <span>{{localize "dc20rpg.dialog.advancement.talentMastery"}}</span>
      <div class="picker">
        <a class="talent-mastery-selector" title="{{localize "dc20rpg.dialog.advancement.martial"}}" data-mastery="martial"> 
          <img src="systems/dc20rpg/images/dialog/advancement/martial-mastery.jpg" class="martial {{#ifCond mastery '!==' "martial"}}disabled{{/ifCond}}">
        </a>
        <a class="talent-mastery-selector" title="{{localize "dc20rpg.dialog.advancement.spellcaster"}}" data-mastery="spellcaster"> 
          <img src="systems/dc20rpg/images/dialog/advancement/spellcaster-mastery.jpg" class="spellcaster {{#ifCond mastery '!==' "spellcaster"}}disabled{{/ifCond}}">
        </a>
      </div>
    </div>
    {{/if}}
    <div class="footer">
      <button class="close apply button margin-top-5 ">{{localize "dc20rpg.dialog.advancement.apply"}}</button>
    </div>
    {{/if}}
  </div>
</form>