<form class="{{cssClass}}" autocomplete="off">
  <header class="sheet-header">
    <img class="profile-img" src="{{item.img}}" data-edit="img" title="{{item.name}}"/>
    <div class="header-fields">
      <h1 class="charname"><input name="name" type="text" value="{{item.name}}" placeholder="Name"/></h1>
    </div>
  </header>

  {{!-- Sheet Tab Navigation --}}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item" data-tab="description">Description</a>
    <a class="item" data-tab="attributes">Attributes</a>
    <a class="item" data-tab="effects">Effects</a>
  </nav>

  {{!-- Sheet Body --}}
  <section class="sheet-body">

    {{!-- Description Tab --}}
    <div class="tab" data-group="primary" data-tab="description">
      {{!-- Editors must receive enriched text data from getData to properly handle rolls --}}
      {{editor enrichedDescription target="system.description" engine="prosemirror" button=true editable=editable}}
    </div>

    {{!-- Attributes Tab --}}
    <div class="tab attributes" data-group="primary" data-tab="attributes">
      {{!-- Path-specific attributes --}}
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Benefits"}}</label>
        <div class="form-fields">
          {{#each system.benefits}}
          <input type="text" name="system.benefits.{{@index}}" value="{{this}}">
          {{/each}}
          <button type="button" class="add-benefit">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>

      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Drawbacks"}}</label>
        <div class="form-fields">
          {{#each system.drawbacks}}
          <input type="text" name="system.drawbacks.{{@index}}" value="{{this}}">
          {{/each}}
          <button type="button" class="add-drawback">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>
    </div>

    {{!-- Effects Tab --}}
    <div class="tab effects" data-group="primary" data-tab="effects">
      {{> "systems/myriad-system/templates/item/parts/item-effects.hbs"}}
    </div>
  </section>

</form>
