<form class="{{cssClass}} flexcol" 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="{{localize 'Name'}}"/></h1>
      <div class="item-subtitle">
        <h4 class="item-type">{{localize "MYRIAD_SYSTEM.ItemType.art"}}</h4>
        <span class="item-status">{{localize "MYRIAD_SYSTEM.Grade.label"}}: {{system._displayGrade}}</span>
      </div>
    </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" button=true editable=editable engine="prosemirror"}}
    </div>

    {{!-- Attributes Tab --}}
    <div class="tab attributes" data-group="primary" data-tab="attributes">
      {{!-- Linked Characteristic --}}
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.UI.Characteristic"}}</label>
        <div class="form-fields">
          <select name="system.linkedCharacteristic">
            {{#select system.linkedCharacteristic}}
              <option value="puissance">{{localize "MYRIAD_SYSTEM.Characteristic.Puissance"}}</option>
              <option value="coordination">{{localize "MYRIAD_SYSTEM.Characteristic.Coordination"}}</option>
              <option value="ingeniosite">{{localize "MYRIAD_SYSTEM.Characteristic.Ingeniosite"}}</option>
              <option value="perspicacite">{{localize "MYRIAD_SYSTEM.Characteristic.Perspicacite"}}</option>
            {{/select}}
          </select>
        </div>
      </div>
      
      {{!-- Grade with pips (uniformized) --}}
      <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>
      
      <div class="form-group">
        <label>{{localize "MYRIAD_SYSTEM.Acquisition.xpCost"}}</label>
        <div class="form-fields">
          <input type="number" name="system.acquisition.xpCost" value="{{system.acquisition.xpCost}}" data-dtype="Number">
        </div>
      </div>

      {{!-- Benefits list with inline + next to label --}}
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Benefits"}}</label>
        <a class="array-item-add" data-array="benefits" title="{{localize 'MYRIAD_SYSTEM.UI.Add'}}"><i class="fas fa-plus"></i></a>
        <ol class="array-list benefit-list">
          {{#each system.benefits as |benefit i|}}
          <li class="array-item">
            <input type="text" name="system.benefits.{{i}}" value="{{benefit}}">
            <a class="array-item-remove" data-index="{{i}}" data-array="benefits" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </div>

      {{!-- Constraints list with inline + next to label --}}
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.ItemAttributes.Drawbacks"}}</label>
        <a class="array-item-add" data-array="constraints" title="{{localize 'MYRIAD_SYSTEM.UI.Add'}}"><i class="fas fa-plus"></i></a>
        <ol class="array-list constraint-list">
          {{#each system.constraints as |constraint i|}}
          <li class="array-item">
            <input type="text" name="system.constraints.{{i}}" value="{{constraint}}">
            <a class="array-item-remove" data-index="{{i}}" data-array="constraints" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </div>
      
      {{!-- Prerequisites list with inline + next to label --}}
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.Acquisition.prerequisites"}}</label>
        <a class="array-item-add" data-array="acquisition.prerequisites" title="{{localize 'MYRIAD_SYSTEM.UI.AddPrerequisite'}}"><i class="fas fa-plus"></i></a>
        <ol class="array-list prerequisite-list">
          {{#each system.acquisition.prerequisites as |prereq i|}}
          <li class="array-item">
            <input type="text" name="system.acquisition.prerequisites.{{i}}" value="{{prereq}}">
            <a class="array-item-remove" data-index="{{i}}" data-array="acquisition.prerequisites" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </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>
