<section class="flexcol cde-sheet {{cssClass}}">
  <header class="cde-neon-header spell">
    <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="components">{{ localize "CDE.Components" }}</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="effects">{{ localize "CDE.Effects" }}</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="examples">{{ localize "CDE.Examples" }}</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.Discipline" }}</span>
            <select name="system.discipline">
              <option value="internalcinnabar" {{#if (eq systemData.discipline "internalcinnabar")}}selected{{/if}}>{{ localize "CDE.SchoolCinabre" }}</option>
              <option value="alchemy" {{#if (eq systemData.discipline "alchemy")}}selected{{/if}}>{{ localize "CDE.SchoolAlchemy" }}</option>
              <option value="masteryoftheway" {{#if (eq systemData.discipline "masteryoftheway")}}selected{{/if}}>{{ localize "CDE.SchoolVoie" }}</option>
              <option value="exorcism" {{#if (eq systemData.discipline "exorcism")}}selected{{/if}}>{{ localize "CDE.SchoolExorcisme" }}</option>
              <option value="geomancy" {{#if (eq systemData.discipline "geomancy")}}selected{{/if}}>{{ localize "CDE.SchoolGeomancy" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.SpecialityName" }}</span>
            <input type="text" name="system.specialityname" value="{{systemData.specialityname}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.AssociatedElement" }}</span>
            <select name="system.associatedelement">
              <option value="metal" {{#if (eq systemData.associatedelement "metal")}}selected{{/if}}>{{ localize "CDE.Metal" }}</option>
              <option value="eau" {{#if (eq systemData.associatedelement "eau")}}selected{{/if}}>{{ localize "CDE.Water" }}</option>
              <option value="terre" {{#if (eq systemData.associatedelement "terre")}}selected{{/if}}>{{ localize "CDE.Earth" }}</option>
              <option value="feu" {{#if (eq systemData.associatedelement "feu")}}selected{{/if}}>{{ localize "CDE.Fire" }}</option>
              <option value="bois" {{#if (eq systemData.associatedelement "bois")}}selected{{/if}}>{{ localize "CDE.Wood" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiType" }}</span>
            <select name="system.heiType">
              <option value="yin" {{#if (eq systemData.heiType "yin")}}selected{{/if}}>{{ localize "CDE.HeiYin" }}</option>
              <option value="yang" {{#if (eq systemData.heiType "yang")}}selected{{/if}}>{{ localize "CDE.HeiYang" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Hei" }}</span>
            <input type="text" name="system.hei" value="{{systemData.hei}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiCost" }}</span>
            <input type="number" name="system.heiCost" value="{{systemData.heiCost}}" min="0" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Difficulty" }}</span>
            <input type="number" name="system.difficulty" value="{{systemData.difficulty}}" min="0" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.RealizationTimeRitual" }}</span>
            <input type="text" name="system.realizationtimeritual" value="{{systemData.realizationtimeritual}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.RealizationTimeAccelerated" }}</span>
            <input type="text" name="system.realizationtimeaccelerated" value="{{systemData.realizationtimeaccelerated}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Flashback" }}</span>
            <input type="text" name="system.flashback" value="{{systemData.flashback}}" placeholder="—" />
          </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 spell">{{ localize "CDE.Spells" }}</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=spellDescriptionHTML value=system.description name="system.description" toggled=true}}
      </div>
    </div>
    <div class="tab" data-group="primary" data-tab="components">
      <div class="cde-tab-label">{{ localize "CDE.Components" }}</div>
      <div class="cde-card cde-notes-editor">
        {{formInput systemFields.components enriched=componentsDescriptionHTML value=system.components name="system.components" toggled=true}}
      </div>
    </div>
    <div class="tab" data-group="primary" data-tab="effects">
      <div class="cde-tab-label">{{ localize "CDE.Effects" }}</div>
      <div class="cde-card cde-notes-editor">
        {{formInput systemFields.effects enriched=effectsDescriptionHTML value=system.effects name="system.effects" toggled=true}}
      </div>
    </div>
    <div class="tab" data-group="primary" data-tab="examples">
      <div class="cde-tab-label">{{ localize "CDE.Examples" }}</div>
      <div class="cde-card cde-notes-editor">
        {{formInput systemFields.examples enriched=examplesDescriptionHTML value=system.examples name="system.examples" 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>
