<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"
  >
    {{! Prism RPG: Mana Cost }}
    {{formField
      systemFields.manaCost
      value=system.manaCost
      localize=true
      label="PRISMRPG.Label.manaCost"
    }}

    {{! Prism RPG: Mana Upkeep }}
    {{formField
      systemFields.manaUpkeep
      value=system.manaUpkeep
      localize=true
      label="PRISMRPG.Label.manaUpkeep"
    }}

    {{! Prism RPG: APC (Action Point Cost) }}
    {{formField
      systemFields.apc
      value=system.apc
      localize=true
      label="PRISMRPG.Label.apc"
    }}

    {{! Prism RPG: Prism Color }}
    {{formField
      systemFields.color
      value=system.color
      localize=true
      label="PRISMRPG.Label.prismColor"
    }}

    {{! Spell Properties }}
    {{formField
      systemFields.memorized
      value=system.memorized
      localize=true
      label="PRISMRPG.Label.memorized"
    }}
    {{formField
      systemFields.level
      value=system.level
      localize=true
      label="PRISMRPG.Label.level"
    }}
    {{formField
      systemFields.targets
      value=system.targets
      localize=true
      label="PRISMRPG.Label.targets"
    }}
    {{formField
      systemFields.resolve
      value=system.resolve
      localize=true
      label="PRISMRPG.Label.resolve"
    }}
    {{formField
      systemFields.castingTime
      value=system.castingTime
      localize=true
      label="PRISMRPG.Label.castingTime"
    }}
    {{formField
      systemFields.spellRange
      value=system.spellRange
      localize=true
      label="PRISMRPG.Label.range"
    }}
    {{formField
      systemFields.areaAffected
      value=system.areaAffected
      localize=true
      label="PRISMRPG.Label.areaAffected"
    }}
    {{formField
      systemFields.duration
      value=system.duration
      localize=true
      label="PRISMRPG.Label.duration"
    }}
    {{formField
      systemFields.savingThrow
      value=system.savingThrow
      localize=true
      label="PRISMRPG.Label.savingThrow"
    }}
    {{formField
      systemFields.keywords
      value=system.keywords
      localize=true
      label="PRISMRPG.Label.keywords"
    }}

    {{! Prism RPG: Color Effect }}
    <fieldset class="spell-color-effect">
      <legend>{{localize "PRISMRPG.Label.colorEffect"}}</legend>
      {{formInput
        systemFields.colorEffect
        enriched=enrichedColorEffect
        value=system.colorEffect
        name="system.colorEffect"
        toggled=true
      }}
    </fieldset>

    {{! Prism RPG: Spell Ascension }}
    <fieldset class="spell-ascension">
      <legend>{{localize "PRISMRPG.Label.spellAscension"}}</legend>
      <div class="form-group">
        <label>{{localize "PRISMRPG.Label.canAscend"}}</label>
        <input
          type="checkbox"
          name="system.canAscend"
          {{checked system.canAscend}}
        />
        <p class="hint">{{localize "PRISMRPG.Hint.spellAscension"}}</p>
      </div>
      {{#if system.canAscend}}
        <label>{{localize "PRISMRPG.Label.ascensionEffect"}}</label>
        {{formInput
          systemFields.ascensionEffect
          enriched=enrichedAscensionEffect
          value=system.ascensionEffect
          name="system.ascensionEffect"
          toggled=true
        }}
      {{/if}}
    </fieldset>
  </div>

  {{! Onglet Description }}
  <div
    class="tab {{tabs.description.cssClass}}"
    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>