<section class="flexcol cde-sheet {{cssClass}}">
  <header class="cde-neon-header ingredient">
    <img class="cde-avatar" src="{{item.img}}" data-action="editImage" data-edit="img" title="{{item.name}}" />
    <div class="cde-header-content">
      <h1 class="cde-item-name">
        <input name="name" type="text" value="{{item.name}}" placeholder="{{ localize 'CDE.Name' }}" />
      </h1>
    </div>
  </header>

  <nav class="sheet-tabs tabs cde-neon-tabs" data-group="primary">
    <a class="item" data-action="tab" data-group="primary" data-tab="details">{{ localize "CDE.Details" }}</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="description">{{ localize "CDE.Description" }}</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="notes">{{ localize "CDE.Notes" }}</a>
  </nav>

  <section class="sheet-body cde-tab-body">
    <div class="tab" data-group="primary" data-tab="details">
      <div class="cde-tab-label">{{ localize "CDE.Details" }}</div>
      <div class="cde-card">
        <div class="cde-stat-grid">
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.School" }}</span>
            <select name="system.school">
              <option value="all" {{#if (eq systemData.school "all")}}selected{{/if}}>{{ localize "CDE.SchoolAll" }}</option>
              <option value="cinabre" {{#if (eq systemData.school "cinabre")}}selected{{/if}}>{{ localize "CDE.SchoolCinabre" }}</option>
              <option value="alchemy" {{#if (eq systemData.school "alchemy")}}selected{{/if}}>{{ localize "CDE.SchoolAlchemy" }}</option>
              <option value="voie" {{#if (eq systemData.school "voie")}}selected{{/if}}>{{ localize "CDE.SchoolVoie" }}</option>
              <option value="exorcisme" {{#if (eq systemData.school "exorcisme")}}selected{{/if}}>{{ localize "CDE.SchoolExorcisme" }}</option>
              <option value="geomancy" {{#if (eq systemData.school "geomancy")}}selected{{/if}}>{{ localize "CDE.SchoolGeomancy" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.ObtainLevel" }}</span>
            <input type="number" name="system.obtainLevel" value="{{systemData.obtainLevel}}" min="0" max="5" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.ObtainDifficulty" }}</span>
            <input type="number" name="system.obtainDifficulty" value="{{systemData.obtainDifficulty}}" min="0" max="3" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Quantity" }}</span>
            <input type="number" name="system.quantity" value="{{systemData.quantity}}" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Reference" }}</span>
            <input type="text" name="system.reference" value="{{systemData.reference}}" placeholder="—" />
          </div>
        </div>
        <div style="margin-top:8px;">
          <span class="cde-badge ingredient">{{ localize "CDE.Ingredient" }}</span>
        </div>
      </div>
    </div>
    <div class="tab" data-group="primary" data-tab="description">
      <div class="cde-tab-label">{{ localize "CDE.Description" }}</div>
      <div class="cde-card cde-notes-editor">
        {{formInput systemFields.description enriched=descriptionHTML value=system.description name="system.description" toggled=true}}
      </div>
    </div>
    <div class="tab" data-group="primary" data-tab="notes">
      <div class="cde-tab-label">{{ localize "CDE.Notes" }}</div>
      <div class="cde-card cde-notes-editor">
        {{formInput systemFields.notes enriched=notesHTML value=system.notes name="system.notes" toggled=true}}
      </div>
    </div>
  </section>
</section>
