<div class="item-sheet anomaly">
  <header class="item-header">
    <div class="item-portrait" data-action="editImage">
      <img src="{{item.img}}" alt="{{item.name}}">
    </div>
    <div class="item-header-fields">
      <input type="text" name="name" value="{{item.name}}" {{#unless isEditable}}disabled{{/unless}}>
      <div class="item-meta">
        <select name="system.subtype" {{#unless isEditable}}disabled{{/unless}}>
          {{#each anomalyTypes as |atype key|}}
          <option value="{{key}}" {{#if (eq key ../system.subtype)}}selected{{/if}}>{{localize atype.label}}</option>
          {{/each}}
        </select>
        <div class="anomaly-level-field">
          <label>{{localize "CELESTOPOL.Anomaly.level"}}</label>
          {{#if isEditable}}
          <input type="number" name="system.level" value="{{system.level}}" min="1" max="4" class="level-input">
          {{else}}
          <span class="anomaly-level-value">{{system.level}}</span>
          {{/if}}
        </div>
      </div>
      {{!-- Usages restants : dots visuels --}}
      <div class="anomaly-uses-row">
        <span class="anomaly-uses-label">{{localize "CELESTOPOL.Anomaly.usesRemaining"}} :</span>
        <div class="anomaly-uses-dots">
          {{#each (array 1 2 3 4) as |n|}}
          {{#if (lte n ../system.usesRemaining)}}
          <span class="anomaly-dot available"></span>
          {{else}}
          {{#if (lte n ../system.level)}}
          <span class="anomaly-dot spent"></span>
          {{else}}
          <span class="anomaly-dot inactive"></span>
          {{/if}}
          {{/if}}
          {{/each}}
        </div>
        {{#if isEditable}}
        <input type="number" name="system.usesRemaining" value="{{system.usesRemaining}}" min="0" max="4" class="uses-number-input">
        {{/if}}
      </div>
    </div>
  </header>

  {{!-- Domaines applicables --}}
  {{#if applicableSkillLabels.length}}
  <div class="anomaly-skills-bar">
    <span class="anomaly-skills-label">{{localize "CELESTOPOL.Anomaly.applicableSkills"}} :</span>
    {{#each applicableSkillLabels as |label|}}
    <span class="anomaly-skill-chip">{{label}}</span>
    {{/each}}
  </div>
  {{/if}}

  {{!-- Corps principal : 3 sections sans onglets --}}
  <div class="anomaly-body">

    <div class="anomaly-section">
      <div class="anomaly-section-title">{{localize "CELESTOPOL.Item.technique"}}</div>
      <div class="anomaly-editor-wrap">
        {{formInput systemFields.technique enriched=enrichedTechnique value=system.technique name="system.technique" toggled=true}}
      </div>
    </div>

    <div class="anomaly-section">
      <div class="anomaly-section-title">{{localize "CELESTOPOL.Item.narratif"}}</div>
      <div class="anomaly-editor-wrap">
        {{formInput systemFields.narratif enriched=enrichedNarratif value=system.narratif name="system.narratif" toggled=true}}
      </div>
    </div>

    <div class="anomaly-section">
      <div class="anomaly-section-title">{{localize "CELESTOPOL.Item.exemples"}}</div>
      <div class="anomaly-editor-wrap">
        {{formInput systemFields.exemples enriched=enrichedExemples value=system.exemples name="system.exemples" toggled=true}}
      </div>
    </div>

  </div>
</div>
