<section>
  <div class="item-header">
    <img class="item-img" src="{{item.img}}" data-edit="img" data-action="editImage" data-tooltip="{{item.name}}" />
    {{formInput fields.name value=source.name}}
  </div>
  <div class="item-body">

    <div class="form-row">
      <div class="form-group">
        <label>{{localize "AWEMMY.Ability.TypeLabel"}}</label>
        {{formField systemFields.abilityType value=system.abilityType localize=true}}
      </div>
      <div class="form-group">
        <label>{{localize "AWEMMY.Ability.CostLabel"}}</label>
        {{formField systemFields.cost value=system.cost localize=true}}
      </div>
    </div>

    <div class="form-group">
      <label>{{localize "AWEMMY.Ability.Frequency"}}</label>
      {{formInput systemFields.frequency value=system.frequency}}
    </div>

    <div class="form-group">
      <label>{{localize "AWEMMY.Ability.Requirements"}}</label>
      {{formInput systemFields.requirements value=system.requirements}}
    </div>

    <div class="form-group">
      <label>{{localize "AWEMMY.Ability.Trigger"}}</label>
      {{formInput systemFields.trigger value=system.trigger}}
    </div>

    <div class="form-group-tags">
      <label>{{localize "AWEMMY.Ability.Traits"}}</label>
      <div class="tags-list">
        {{#each system.traits}}
        <span class="tag">{{this}} <a data-action="removeTrait" data-index="{{@index}}">×</a></span>
        {{/each}}
        <input type="text" class="new-tag" data-action="addTrait"
               list="awemmy-trait-suggestions"
               placeholder="{{localize 'AWEMMY.Ability.AddTrait'}}" />
        <datalist id="awemmy-trait-suggestions">
          {{#each traitSuggestions}}<option value="{{this}}">{{/each}}
        </datalist>
      </div>
    </div>

    <fieldset>
      <legend>Description</legend>
      {{formInput systemFields.description enriched=enrichedDescription value=system.description name="system.description" toggled=true}}
    </fieldset>

  </div>
</section>
