<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">{{localize "MYRIAD_SYSTEM.UI.Details"}}</a>
    <a class="item" data-tab="attributes">{{localize "MYRIAD_SYSTEM.UI.Attributes"}}</a>
    <a class="item" data-tab="effects">{{localize "MYRIAD_SYSTEM.SheetLabels.Effects"}}</a>
  </nav>

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

    {{!-- Description Tab --}}
    <div class="tab" data-group="primary" data-tab="description">
      {{editor enrichedDescription target="system.description" engine="prosemirror" button=true editable=editable}}
    </div>

    {{!-- Attributes Tab --}}
    <div class="tab attributes" data-group="primary" data-tab="attributes">
      {{!-- Grade (I to V) clickable pips --}}
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Grade"}}</label>
        <div class="form-fields">
          <div class="item-grade grade-pips">
            {{#times 5}}
            <i class="grade-pip fas {{#if (lte (toNumber this) (toNumber ../system.grade))}}fa-circle{{else}}fa-circle-o{{/if}}"
               data-grade="{{this}}"></i>
            {{/times}}
            <span class="grade-value">{{localize (concat "MYRIAD_SYSTEM.Grade." (numberToRoman system.grade))}}</span>
            <input type="hidden" name="system.grade" value="{{system.grade}}" data-dtype="Number"/>
          </div>
        </div>
      </div>

      {{!-- Path XP cost (top-level) --}}
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.XPCost"}}</label>
        <div class="form-fields">
          <input type="number" name="system.xpCost" value="{{system.xpCost}}" data-dtype="Number"/>
        </div>
      </div>

      {{!-- Tags --}}
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Tags"}}</label>
        <div class="form-fields">
          <input type="text" name="system.tags" value="{{system.tags}}" data-dtype="String"/>
          <p class="hint">{{localize "MYRIAD_SYSTEM.ItemAttributes.TagsHint"}}</p>
        </div>
      </div>

      {{!-- Acquisition prerequisites (from acquirable template) --}}
      {{#if system.acquisition}}
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.Acquisition.prerequisites"}}</label>
        <a class="add-prerequisite" title="{{localize 'MYRIAD_SYSTEM.UI.AddPrerequisite'}}"><i class="fas fa-plus"></i></a>
        <ol class="prerequisites-list">
          {{#each system.acquisition.prerequisites as |prerequisite i|}}
          <li class="prerequisite">
            <input type="text" name="system.acquisition.prerequisites.{{i}}" value="{{prerequisite}}" />
            <a class="delete-prerequisite" data-index="{{i}}" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </div>
      {{/if}}
    </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>
