<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.domain"}}</h4>
        <span class="item-status">{{localize "MYRIAD_SYSTEM.Grade.label"}}: {{system._displayGrade}} | {{system._locType}}</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">
      {{!-- Domain-specific attributes --}}
      <div class="form-group">
        <label>{{localize "Type"}}</label>
        <div class="form-fields">
          <select name="system.type">
            {{#select system.type}}
              <option value="element">{{localize "MYRIAD_SYSTEM.DomainTypes.element"}}</option>
              <option value="body">{{localize "MYRIAD_SYSTEM.DomainTypes.body"}}</option>
              <option value="mind">{{localize "MYRIAD_SYSTEM.DomainTypes.mind"}}</option>
              <option value="nature">{{localize "MYRIAD_SYSTEM.DomainTypes.nature"}}</option>
              <option value="energy">{{localize "MYRIAD_SYSTEM.DomainTypes.energy"}}</option>
              <option value="matter">{{localize "MYRIAD_SYSTEM.DomainTypes.matter"}}</option>
              <option value="space">{{localize "MYRIAD_SYSTEM.DomainTypes.space"}}</option>
              <option value="time">{{localize "MYRIAD_SYSTEM.DomainTypes.time"}}</option>
              <option value="death">{{localize "MYRIAD_SYSTEM.DomainTypes.death"}}</option>
              <option value="life">{{localize "MYRIAD_SYSTEM.DomainTypes.life"}}</option>
              <option value="other">{{localize "MYRIAD_SYSTEM.DomainTypes.other"}}</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>
      
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.SheetLabels.Effects"}}</label>
        <a class="array-item-add" data-array="effects" title="{{localize 'MYRIAD_SYSTEM.UI.Add'}}"><i class="fas fa-plus"></i></a>
        <ol class="array-list effect-list">
          {{#each system.effects as |effect i|}}
          <li class="array-item">
            <input type="text" name="system.effects.{{i}}" value="{{effect}}">
            <a class="array-item-remove" data-index="{{i}}" data-array="effects" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </div>
      
      <div class="form-group stacked">
        <label>{{localize "MYRIAD_SYSTEM.SheetLabels.Spells"}}</label>
        <a class="array-item-add" data-array="spells" title="{{localize 'MYRIAD_SYSTEM.UI.Add'}}"><i class="fas fa-plus"></i></a>
        <ol class="array-list spells-list">
          {{#each system.spells as |spell i|}}
          <li class="array-item">
            <input type="text" name="system.spells.{{i}}" value="{{spell}}">
            <a class="array-item-remove" data-index="{{i}}" data-array="spells" title="{{localize 'MYRIAD_SYSTEM.UI.Delete'}}"><i class="fas fa-trash"></i></a>
          </li>
          {{/each}}
        </ol>
      </div>
      
      <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>
