<section class="flexcol cde-sheet {{cssClass}}">
  <header class="cde-neon-header sanhei">
    <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="prop1">{{ localize "CDE.Property" }} 1</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="prop2">{{ localize "CDE.Property" }} 2</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="prop3">{{ localize "CDE.Property" }} 3</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.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.Reference" }}</span>
            <input type="text" name="system.reference" value="{{systemData.reference}}" placeholder="—" />
          </div>
        </div>
        <div style="margin-top:8px;">
          <span class="cde-badge sanhei">{{ localize "CDE.Sanhei" }}</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="prop1">
      <div class="cde-tab-label">{{ localize "CDE.Property" }} 1</div>
      <div class="cde-card">
        <div class="cde-stat-grid">
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Property" }}</span>
            <input type="text" name="system.properties.prop1.name" value="{{systemData.properties.prop1.name}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiCost" }}</span>
            <input type="number" name="system.properties.prop1.heiCost" value="{{systemData.properties.prop1.heiCost}}" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiType" }}</span>
            <select name="system.properties.prop1.heiType">
              <option value="yin" {{#if (eq systemData.properties.prop1.heiType "yin")}}selected{{/if}}>{{ localize "CDE.HeiYin" }}</option>
              <option value="yang" {{#if (eq systemData.properties.prop1.heiType "yang")}}selected{{/if}}>{{ localize "CDE.HeiYang" }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="cde-card cde-notes-editor" style="margin-top:8px;">
        {{formInput propFields.prop1.fields.description enriched=prop1DescriptionHTML value=system.properties.prop1.description name="system.properties.prop1.description" toggled=true}}
      </div>
    </div>

    <div class="tab" data-group="primary" data-tab="prop2">
      <div class="cde-tab-label">{{ localize "CDE.Property" }} 2</div>
      <div class="cde-card">
        <div class="cde-stat-grid">
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Property" }}</span>
            <input type="text" name="system.properties.prop2.name" value="{{systemData.properties.prop2.name}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiCost" }}</span>
            <input type="number" name="system.properties.prop2.heiCost" value="{{systemData.properties.prop2.heiCost}}" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiType" }}</span>
            <select name="system.properties.prop2.heiType">
              <option value="yin" {{#if (eq systemData.properties.prop2.heiType "yin")}}selected{{/if}}>{{ localize "CDE.HeiYin" }}</option>
              <option value="yang" {{#if (eq systemData.properties.prop2.heiType "yang")}}selected{{/if}}>{{ localize "CDE.HeiYang" }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="cde-card cde-notes-editor" style="margin-top:8px;">
        {{formInput propFields.prop2.fields.description enriched=prop2DescriptionHTML value=system.properties.prop2.description name="system.properties.prop2.description" toggled=true}}
      </div>
    </div>

    <div class="tab" data-group="primary" data-tab="prop3">
      <div class="cde-tab-label">{{ localize "CDE.Property" }} 3</div>
      <div class="cde-card">
        <div class="cde-stat-grid">
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Property" }}</span>
            <input type="text" name="system.properties.prop3.name" value="{{systemData.properties.prop3.name}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiCost" }}</span>
            <input type="number" name="system.properties.prop3.heiCost" value="{{systemData.properties.prop3.heiCost}}" />
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.HeiType" }}</span>
            <select name="system.properties.prop3.heiType">
              <option value="yin" {{#if (eq systemData.properties.prop3.heiType "yin")}}selected{{/if}}>{{ localize "CDE.HeiYin" }}</option>
              <option value="yang" {{#if (eq systemData.properties.prop3.heiType "yang")}}selected{{/if}}>{{ localize "CDE.HeiYang" }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="cde-card cde-notes-editor" style="margin-top:8px;">
        {{formInput propFields.prop3.fields.description enriched=prop3DescriptionHTML value=system.properties.prop3.description name="system.properties.prop3.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>
