<form class="{{cssClass}} itemsheet" autocomplete="off">
  <div class="itemsheet-header"><label>{{ localize 'MGT2.Specie' }}</label></div>
  <div class="itemsheet-panel">
    <div class="itemsheet-maincol">
      <img class="profile-img" src="{{item.img}}" data-edit="img" data-tooltip="{{item.name}}" />
    </div>
    <div class="w-100" style="display: flex;flex-direction: column;justify-content: flex-start;align-items: stretch;">
      <input class="field item-name" name="name" type="text" value="{{item.name}}" />
      <div class="field-group mt-1">
        <label>{{ localize 'MGT2.Items.Description' }}</label>
        <nav class="horizontal-tabs tabs mt-1" data-group="primary">
          <a class="item tab-select" data-tab="tab1">{{ localize 'MGT2.Items.Description' }}</a>
          <a class="item tab-select" data-tab="tab2">{{ localize 'MGT2.Items.DetailedDescription' }}</a>
          <a class="item tab-select" data-tab="tab3">{{ localize 'MGT2.Items.Details' }}</a>
        </nav>
        <div class="tab" data-group="primary" data-tab="tab1">
          <div class="field-group mt-1">
            <label>{{ localize 'MGT2.Items.Description' }}</label>
            <textarea name="system.description" rows="6">{{system.description}}</textarea>
          </div>
        </div>
        <div class="tab w100 h100" data-group="primary" data-tab="tab2">
          {{editor system.descriptionLong target="system.descriptionLong" button=true editable=true}}
        </div>
        <div class="tab" data-group="primary" data-tab="tab3">
          <div class="table-container">
            <div class="table-row heading color-2">
              <div class="row-item row-item-left upcase">{{ localize 'MGT2.Items.Characteristics' }}</div>
              <div class="row-item row-item-center row-item-15 flex-fix">{{ localize 'MGT2.Items.Modifiers' }}</div>
              <div class="row-item row-item-15 item-controls flex-fix"><a class="modifiers-create"><i class="fas fa-plus"></i></a></div>
            </div>
            {{#each system.modifiers as |modifier i| }}
            <div class="table-row modifiers-part" data-modifiers-part="{{i}}" role="rowgroup">
              <div class="row-item row-item-left">
                <select name="system.modifiers.{{i}}.characteristic">
                  {{selectOptions ../config.Characteristics selected=modifier.characteristic localize = true}}
                </select>
              </div>
              <div class="row-item row-item-left row-item-15 flex-fix">
                <input type="number" name="system.modifiers.{{i}}.value" value="{{modifier.value}}" />
              </div>
              <div class="row-item row-item-15 item-controls flex-fix">
                <a class="item-control modifiers-delete" title="Delete Trait"><i class="fas fa-trash"></i></a>
              </div>
            </div>
            {{/each}}
          </div>
          <div class="table-container mt-1">
            <div class="table-row heading color-2">
              <div class="row-item row-item-30 row-item-left upcase">{{ localize 'MGT2.Items.Traits' }}</div>
              <div class="row-item row-item-left">{{ localize 'MGT2.Items.Description' }}</div>
              <div class="row-item row-item-15 item-controls flex-fix"><a class="options-create" data-property="traits"><i class="fas fa-plus"></i></a></div>
            </div>
            {{#each system.traits as |trait i| }}
            <div class="table-row options-part" data-options-part="{{i}}" data-property="traits" role="rowgroup">
              <div class="row-item row-item-30 row-item-left"><input type="text" name="system.traits.{{i}}.name" value="{{trait.name}}" /></div>
              <div class="row-item row-item-left">
                <textarea name="system.traits.{{i}}.description" rows="3">{{trait.description}}</textarea>
              </div>
              <div class="row-item row-item-15 item-controls flex-fix">
                <a class="item-control options-delete" title="Delete Trait"><i class="fas fa-trash"></i></a>
              </div>
            </div>
            {{/each}}
          </div>
        </div>
    </div>
    </div>
  </div>
</form>