<form class="{{cssClass}} {{item.type}} item_v2" autocomplete="off">
  <header class="item-sheet-header">
    <div class="item-img">
      <img src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
    </div>

    <div class="header-content">
      <div class="item-details">
        <input class="item-name" name="name" type="text" value="{{item.name}}" title="{{localize 'dc20rpg.item.sheet.name'}}" placeholder="{{localize 'dc20rpg.item.sheet.name'}}"/>
        {{{item-label sheetData}}}
      </div>
      <div class="item-properties margin-top-3">
        {{#each system.combatTraining as |mastery key|}} {{#if mastery}}
        <div class='detail'>
          {{labelFromKey key @root.config.TRANSLATION_LABELS.combatTraining}}
        </div>
        {{/if}}{{/each}}
      </div>
    </div>
  </header>

  {{!-- Tooltip --}}
  {{PARTIAL "Tooltip"}}

  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="description"><span>{{localize 'dc20rpg.item.sheet.description'}}</span></a>
    <a class="item" data-tab="config"><span>{{localize 'dc20rpg.item.sheet.config.tab'}}</span></a>
    <a class="item" data-tab="table"><span>{{localize 'dc20rpg.item.sheet.classTable'}}</span></a>
    <a class="item" data-tab="advancements"><span>{{localize 'dc20rpg.item.sheet.advancements.title'}}</span></a>
  </nav>

  <section class="item-sheet-body">
    <div class="tab description-tab content padding-7" data-group="primary" data-tab="description">
      <div class="description-box">
        {{editor enriched.description target="system.description" button=true editable=editable engine="prosemirror"}}
      </div>
    </div>

    {{!-- Class Config --}}
    <div class="tab config-tab content padding-7" data-group="primary" data-tab="config">

      <div class="row" title="{{localize "dc20rpg.item.sheet.uniqueItemKeyTitle"}}">
        <span>{{localize "dc20rpg.item.sheet.uniqueItemKey"}}</span>
        <input type="text" name="system.itemKey" value="{{system.itemKey}}" placeholder="{{localize "dc20rpg.item.sheet.uniqueItemKeyPlc"}}">
      </div>
      <div class="row margin-top-3">
        <span>{{localize "dc20rpg.item.sheet.class.martialExpanison"}}</span>
        <a class="fa-lg activable {{#if system.martialExpansion}}fa-solid fa-square-check{{else}}fa-regular fa-square{{/if}}" data-path="system.martialExpansion"></a>
      </div>

      {{!-- Class Category --}}
      <div class="sub-header margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.class.category"}}</span>
      </div>
      <div class="properties">
        <div class="grid grid-2col grid-gap-5 margin-top-3">
          <a class="activable-box activable {{#if system.martial}}active{{/if}}" data-path="system.martial"> 
            {{localize "dc20rpg.item.sheet.class.martial"}}
          </a>
          <a class="activable-box activable {{#if system.spellcaster}}active{{/if}}" data-path="system.spellcaster">
            {{localize "dc20rpg.item.sheet.class.spellcaster"}}
          </a>
        </div>
      </div>

      {{!-- Combat Training --}}
      <div class="sub-header margin-top-10">
        <span>{{localize "dc20rpg.item.sheet.class.combatTraining"}}</span>
      </div>
      <div class="properties">
        <div class="grid grid-5col grid-gap-5 margin-top-3">
          {{#each system.combatTraining as |mastery key|}}
          <a class="activable-box activable {{#if mastery}} active {{/if}}" data-path="system.combatTraining.{{key}}">
            {{labelFromKey key @root.config.TRANSLATION_LABELS.combatTraining}}
          </a>
          {{/each}}
        </div>
      </div>

      {{!-- <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.bannerImg"}}</span>
        <input type="text" name="system.bannerImg" value="{{system.bannerImg}}">
      </div> --}}

      <div class="sub-header margin-top-10">
        <span>{{localize "dc20rpg.item.sheet.startingEquipment"}}</span>
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.startingWeapon"}}</span>
        <textarea type="text" name="system.startingEquipment.weapons">{{system.startingEquipment.weapons}}</textarea>
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.startingArmor"}}</span>
        <textarea type="text" name="system.startingEquipment.armor">{{system.startingEquipment.armor}}</textarea>
      </div>
      <div class="row margin-top-5">
        <span>{{localize "dc20rpg.item.sheet.startingOther"}}</span>
        <textarea type="text" name="system.startingEquipment.other">{{system.startingEquipment.other}}</textarea>
      </div>
    </div>

    {{!-- Class Table --}}
    <div class="tab table-tab content padding-7" data-group="primary" data-tab="table">
      {{#each system.scaling as |value key|}}
      <div class="sub-header {{#ifCond @index '!==' 0}}margin-top-10{{/ifCond}}" style="border-bottom: 0;">
        <span>{{value.label}}</span>
      </div>
      <div class="border-box no-margin no-small-boxes">
        <div class="box-inner">
          <div class="scaling">
            <div class="value-container">
              <div class="grid grid-12col">
                <div class="scale grid-span-2">
                  <div class="level-span"><span> Level </span></div>
                </div>
                {{#each value.values}}
                {{#ifCond @index '===' 10}}
                <div class="scale grid-span-2">
                  <div class="level-span"><span> Level </span></div>
                </div>
                {{/ifCond}}
                <div class="scale">
                  <div>
                    <div class="level">
                      <span> {{add @index 1}} </span>
                    </div>
                    <div class="value">
                      <input {{#if @root.hasOwner}}disabled title="{{localize 'dc20rpg.item.sheet.advancements.nonEditableTable'}}"{{/if}} class="update-scaling" type="text" value="{{this}}" data-key="{{key}}" data-index="{{@index}}">
                    </div>
                  </div>
                </div>
                {{/each}}
              </div>
            </div>
          </div>
        </div>
      </div>
      {{/each}}
    </div>

    {{PARTIAL "Advancements"}}
  </section>
</form>