<form class="{{cssClass}}" autocomplete="off">
  {{! Sheet Header }}
  <header class="sheet-header card clipped-bot">
    <h1 class="name">
      <input
        class="lancer-input header-field"
        name="name"
        type="text"
        value="{{item.name}}"
        placeholder="{{localize 'lancer.placeholder.name'}}"
      >
    </h1>
    {{{ref-portrait-img item.img "img" item}}}
    {{#if item.isOwned}}
      <div class="header-details">
        UNLOCKED RANK:
        {{{l-num-input "system.curr_rank"}}}
      </div>
    {{/if}}
  </header>
  {{! Sheet Body }}
  <div class="flexcol">
    {{{textarea-card "DESCRIPTION" "system.description"}}}
    {{{textarea-card "TERSE DESCRIPTION" "system.terse"}}}
    <a
      class="gen-control fas fa-plus"
      data-action="append"
      data-path="system.ranks"
      style="align-self: flex-end; margin-right: 1em"
      data-action-value="(struct)talent_rank"
    ></a>
    {{#each system.ranks as |rank index|}}
      <div class="talent-level card clipped-bot flexcol">
        <div class="lancer-header lancer-talent" style="flex-basis: auto">
          <i class="cci cci-rank-{{inc index}} i--6 i--dark"></i>
          <input
            class="lancer-invisible-input"
            name="system.ranks.{{index}}.name"
            value="{{rank.name}}"
            data-dtype="String"
            style="color: white"
          >
          <span class="minor">
            // RANK
            {{inc index}}
          </span>
          <a class="gen-control i--light" data-action="splice" data-path="system.ranks.{{index}}">
            <i class="fas fa-trash"></i>
          </a>
          {{{popout-editor-button (concat "system.ranks." index ".description")}}}
        </div>
        <div class="desc-text">
          {{{safe-html rank.description}}}
        </div>
        {{! Bonuses }}
        {{{item-edit-arrayed-actions (concat "system.ranks." index ".actions") "ACTIONS"}}}
        {{{item-edit-arrayed-bonuses (concat "system.ranks." index ".bonuses")}}}
        {{{counter-array rank.counters (concat "system.ranks." index ".counters") true}}}
        <div class="integrated-wrapper card clipped flexcol">
          <div class="lancer-header lancer-primary" style="font-weight: bold">INTEGRATED GEAR</div>
          <ul>
            {{#each rank.integrated as |integrated integ_index|}}
              <li>
                <code>
                  {{integrated}}
                </code>
              </li>
            {{/each}}
          </ul>
        </div>
        {{{item-edit-arrayed-deployables (concat "system.ranks." index ".deployables") "DEPLOYABLES"}}}
        {{{item-edit-arrayed-synergies (concat "system.ranks." index ".synergies") "SYNERGIES"}}}
      </div>
    {{/each}}
  </div>
</form>
