<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}}}
    <div class="header-details">
      {{{item-edit-license}}}
    </div>
  </header>

  <div class="card">
    <div class="lancer-header lancer-primary stretch">
      <!-- Put all the system metadata up here -->
      {{{item-edit-sp "system.sp"}}}
      <div>
        {{{sys-type-sel "system.type"}}}
      </div>
    </div>

    {{! Status }}
    <div class="card clipped">
      <div class="lancer-header lancer-primary major">STATUS</div>
      <div class="flexrow" style="align-self: center">
        {{#if (is-limited item)}}
          {{{limited-uses-indicator item "item"}}}
        {{/if}}
      </div>
    </div>

    {{{textarea-card "DESCRIPTION" "system.description"}}}
    {{{textarea-card "EFFECT" "system.effect"}}}

    {{! Bonuses }}
    {{!-- prettier-ignore --}}
    <div>
      {{{item-edit-arrayed-actions      "system.actions"       "ACTIONS"}}}
      {{{item-edit-arrayed-bonuses      "system.bonuses"}}}
      {{{counter-array system.counters  "system.counters"      true}}}
      {{{item-edit-arrayed-deployables  "system.deployables"   "DEPLOYABLES"}}}
      {{{item-edit-arrayed-synergies    "system.synergies"     "SYNERGIES"}}}
      {{{item-edit-arrayed-integrated   "system.integrated"    "INTEGRATED ITEMS"}}}
    </div>

    {{{item-edit-arrayed-tags "system.tags" "TAGS"}}}
  </div>
</form>
