<section>
  <div class="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>

  {{! Navigation des onglets }}
  <nav class="sheet-tabs tabs" data-group="primary">
    <a class="item {{tabs.details.cssClass}}" data-tab="details">{{localize "PRISMRPG.Label.details"}}</a>
    <a class="item {{tabs.description.cssClass}}" data-tab="description">{{localize "PRISMRPG.Label.description"}}</a>
    <a class="item {{tabs.effects.cssClass}}" data-tab="effects">{{localize "PRISMRPG.Label.effects"}}</a>
  </nav>

  {{! Onglet Details }}
  <div class="tab {{tabs.details.cssClass}}" data-group="primary" data-tab="details">
  {{formField systemFields.quantity value=system.quantity localize=true}}
  {{formField systemFields.encLoad value=system.encLoad localize=true}}
  {{formField systemFields.cost value=system.cost localize=true}}
  {{formField systemFields.money value=system.money localize=true}}

  {{formField systemFields.isKit value=system.isKit localize=true label="PRISMRPG.Label.isKit"}}

  {{#if system.isKit}}
    {{! Kit Passive }}
    <fieldset class="kit-passive">
      <legend>{{localize "PRISMRPG.Label.kitPassive"}}</legend>
      {{formField
        systemFields.passive
        value=system.passive
        localize=true
        label="PRISMRPG.Label.passiveName"
      }}
      <label>{{localize "PRISMRPG.Label.passiveDescription"}}</label>
      {{formInput
        systemFields.passiveDescription
        enriched=enrichedPassiveDescription
        value=system.passiveDescription
        name="system.passiveDescription"
        toggled=true
      }}
    </fieldset>

    {{! Special Activations }}
    <fieldset class="special-activations">
      <legend>
        {{localize "PRISMRPG.Label.specialActivations"}}
        <button type="button" data-action="add-special-activation" data-tooltip="{{localize 'PRISMRPG.Label.addSpecialActivation'}}">
          <i class="fas fa-plus"></i>
        </button>
      </legend>

      {{#each enrichedSpecialActivations}}
        <div class="activation-item" data-activation-index="{{@index}}">
          <div class="activation-header">
            {{formInput
              ../systemFields.specialActivations.element.fields.name
              value=this.name
              name=(concat "system.specialActivations." @index ".name")
              placeholder=(localize "PRISMRPG.Label.activationName")
            }}
            <button type="button" data-action="delete-special-activation" data-tooltip="{{localize 'PRISMRPG.Label.deleteSpecialActivation'}}">
              <i class="fas fa-trash"></i>
            </button>
          </div>
          <label>{{localize "PRISMRPG.Label.activationDescription"}}</label>
          {{formInput
            ../systemFields.specialActivations.element.fields.description
            enriched=this.enrichedDescription
            value=this.description
            name=(concat "system.specialActivations." @index ".description")
            toggled=true
          }}
        </div>
      {{/each}}

      {{#unless enrichedSpecialActivations.length}}
        <p class="hint">{{localize "PRISMRPG.Hint.noSpecialActivations"}}</p>
      {{/unless}}
    </fieldset>
  {{/if}}
  </div>

  {{! Onglet Description }}
  <div class="tab" data-group="primary" data-tab="description">
  <fieldset>
    <legend>{{localize "PRISMRPG.Label.description"}}</legend>
    {{formInput
      systemFields.description
      enriched=enrichedDescription
      value=system.description
      name="system.description"
      toggled=true
    }}
  </fieldset>
  </div>

  {{! Onglet Effects }}
  <div class="tab {{tabs.effects.cssClass}}" data-group="primary" data-tab="effects">
    {{> systems/fvtt-prism-rpg/templates/partial-item-effects.hbs}}
  </div>

</section>