<section class="flexcol cde-sheet {{cssClass}}">
  <header class="cde-neon-header kungfu">
    <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="technique1">{{ localize "CDE.Technique" }} 1</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="technique2">{{ localize "CDE.Technique" }} 2</a>
    <a class="item" data-action="tab" data-group="primary" data-tab="technique3">{{ localize "CDE.Technique" }} 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.Orientation" }}</span>
            <select name="system.orientation">
              <option value="yin" {{#if (eq systemData.orientation "yin")}}selected{{/if}}>{{ localize "CDE.OrientationYin" }}</option>
              <option value="yang" {{#if (eq systemData.orientation "yang")}}selected{{/if}}>{{ localize "CDE.OrientationYang" }}</option>
              <option value="yinyang" {{#if (eq systemData.orientation "yinyang")}}selected{{/if}}>{{ localize "CDE.OrientationYinYang" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Aspect" }}</span>
            <select name="system.aspect">
              <option value="metal" {{#if (eq systemData.aspect "metal")}}selected{{/if}}>{{ localize "CDE.Metal" }}</option>
              <option value="eau" {{#if (eq systemData.aspect "eau")}}selected{{/if}}>{{ localize "CDE.Water" }}</option>
              <option value="terre" {{#if (eq systemData.aspect "terre")}}selected{{/if}}>{{ localize "CDE.Earth" }}</option>
              <option value="feu" {{#if (eq systemData.aspect "feu")}}selected{{/if}}>{{ localize "CDE.Fire" }}</option>
              <option value="bois" {{#if (eq systemData.aspect "bois")}}selected{{/if}}>{{ localize "CDE.Wood" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Skill" }}</span>
            <select name="system.skill">
              <option value="kungfu" {{#if (eq systemData.skill "kungfu")}}selected{{/if}}>{{ localize "CDE.SkillKungfu" }}</option>
              <option value="rangedcombat" {{#if (eq systemData.skill "rangedcombat")}}selected{{/if}}>{{ localize "CDE.RangedCombat" }}</option>
            </select>
          </div>
          <div class="cde-stat-cell">
            <span class="cde-stat-label">{{ localize "CDE.Speciality" }}</span>
            <input type="text" name="system.speciality" value="{{systemData.speciality}}" placeholder="—" />
          </div>
          <div class="cde-stat-cell cde-stat-cell--wide">
            <span class="cde-stat-label">{{ localize "CDE.Style" }}</span>
            <textarea name="system.style" placeholder="—" rows="3">{{systemData.style}}</textarea>
          </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 kungfu">{{ localize "CDE.KungFu" }}</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="technique1">
      <div class="cde-card cde-technique-card">
        <header class="cde-technique-header">
          <div class="cde-technique-title">
            <span class="cde-badge kungfu">T1</span>
            <input type="text" name="system.techniques.technique1.name"
              value="{{systemData.techniques.technique1.name}}"
              placeholder="{{ localize 'CDE.Technique' }}" />
          </div>
          <div class="cde-technique-meta">
            <div class="cde-check-cell">
              <label>{{ localize "CDE.Masterized" }}</label>
              <input type="checkbox" name="system.techniques.technique1.check"
                {{ checked systemData.techniques.technique1.check }} />
            </div>
            <div class="cde-stat-cell" style="min-width:140px;">
              <span class="cde-stat-label">{{ localize "CDE.Activation" }}</span>
              <select name="system.techniques.technique1.activation">
                <option value="action-attack" {{#if (eq systemData.techniques.technique1.activation "action-attack")}}selected{{/if}}>{{ localize "CDE.ActivationAttack" }}</option>
                <option value="action-defense" {{#if (eq systemData.techniques.technique1.activation "action-defense")}}selected{{/if}}>{{ localize "CDE.ActivationDefense" }}</option>
                <option value="action-aid" {{#if (eq systemData.techniques.technique1.activation "action-aid")}}selected{{/if}}>{{ localize "CDE.ActivationAid" }}</option>
                <option value="action-attack-defense" {{#if (eq systemData.techniques.technique1.activation "action-attack-defense")}}selected{{/if}}>{{ localize "CDE.ActivationAttackOrDefense" }}</option>
                <option value="reaction" {{#if (eq systemData.techniques.technique1.activation "reaction")}}selected{{/if}}>{{ localize "CDE.ActivationReaction" }}</option>
                <option value="dice" {{#if (eq systemData.techniques.technique1.activation "dice")}}selected{{/if}}>{{ localize "CDE.ActivationDice" }}</option>
                <option value="damage-inflicted" {{#if (eq systemData.techniques.technique1.activation "damage-inflicted")}}selected{{/if}}>{{ localize "CDE.ActivationDamageInflicted" }}</option>
                <option value="damage-received" {{#if (eq systemData.techniques.technique1.activation "damage-received")}}selected{{/if}}>{{ localize "CDE.ActivationDamageReceived" }}</option>
              </select>
            </div>
          </div>
        </header>
        <div class="cde-technique-body">
          {{formInput systemFields.techniques.fields.technique1.fields.technique enriched=descriptionTechnique1HTML value=system.techniques.technique1.technique name="system.techniques.technique1.technique" toggled=true}}
        </div>
      </div>
    </div>

    <div class="tab" data-group="primary" data-tab="technique2">
      <div class="cde-card cde-technique-card">
        <header class="cde-technique-header">
          <div class="cde-technique-title">
            <span class="cde-badge kungfu">T2</span>
            <input type="text" name="system.techniques.technique2.name"
              value="{{systemData.techniques.technique2.name}}"
              placeholder="{{ localize 'CDE.Technique' }}" />
          </div>
          <div class="cde-technique-meta">
            <div class="cde-check-cell">
              <label>{{ localize "CDE.Masterized" }}</label>
              <input type="checkbox" name="system.techniques.technique2.check"
                {{ checked systemData.techniques.technique2.check }} />
            </div>
            <div class="cde-stat-cell" style="min-width:140px;">
              <span class="cde-stat-label">{{ localize "CDE.Activation" }}</span>
              <select name="system.techniques.technique2.activation">
                <option value="action-attack" {{#if (eq systemData.techniques.technique2.activation "action-attack")}}selected{{/if}}>{{ localize "CDE.ActivationAttack" }}</option>
                <option value="action-defense" {{#if (eq systemData.techniques.technique2.activation "action-defense")}}selected{{/if}}>{{ localize "CDE.ActivationDefense" }}</option>
                <option value="action-aid" {{#if (eq systemData.techniques.technique2.activation "action-aid")}}selected{{/if}}>{{ localize "CDE.ActivationAid" }}</option>
                <option value="action-attack-defense" {{#if (eq systemData.techniques.technique2.activation "action-attack-defense")}}selected{{/if}}>{{ localize "CDE.ActivationAttackOrDefense" }}</option>
                <option value="reaction" {{#if (eq systemData.techniques.technique2.activation "reaction")}}selected{{/if}}>{{ localize "CDE.ActivationReaction" }}</option>
                <option value="dice" {{#if (eq systemData.techniques.technique2.activation "dice")}}selected{{/if}}>{{ localize "CDE.ActivationDice" }}</option>
                <option value="damage-inflicted" {{#if (eq systemData.techniques.technique2.activation "damage-inflicted")}}selected{{/if}}>{{ localize "CDE.ActivationDamageInflicted" }}</option>
                <option value="damage-received" {{#if (eq systemData.techniques.technique2.activation "damage-received")}}selected{{/if}}>{{ localize "CDE.ActivationDamageReceived" }}</option>
              </select>
            </div>
          </div>
        </header>
        <div class="cde-technique-body">
          {{formInput systemFields.techniques.fields.technique2.fields.technique enriched=descriptionTechnique2HTML value=system.techniques.technique2.technique name="system.techniques.technique2.technique" toggled=true}}
        </div>
      </div>
    </div>

    <div class="tab" data-group="primary" data-tab="technique3">
      <div class="cde-card cde-technique-card">
        <header class="cde-technique-header">
          <div class="cde-technique-title">
            <span class="cde-badge kungfu">T3</span>
            <input type="text" name="system.techniques.technique3.name"
              value="{{systemData.techniques.technique3.name}}"
              placeholder="{{ localize 'CDE.Technique' }}" />
          </div>
          <div class="cde-technique-meta">
            <div class="cde-check-cell">
              <label>{{ localize "CDE.Masterized" }}</label>
              <input type="checkbox" name="system.techniques.technique3.check"
                {{ checked systemData.techniques.technique3.check }} />
            </div>
            <div class="cde-stat-cell" style="min-width:140px;">
              <span class="cde-stat-label">{{ localize "CDE.Activation" }}</span>
              <select name="system.techniques.technique3.activation">
                <option value="action-attack" {{#if (eq systemData.techniques.technique3.activation "action-attack")}}selected{{/if}}>{{ localize "CDE.ActivationAttack" }}</option>
                <option value="action-defense" {{#if (eq systemData.techniques.technique3.activation "action-defense")}}selected{{/if}}>{{ localize "CDE.ActivationDefense" }}</option>
                <option value="action-aid" {{#if (eq systemData.techniques.technique3.activation "action-aid")}}selected{{/if}}>{{ localize "CDE.ActivationAid" }}</option>
                <option value="action-attack-defense" {{#if (eq systemData.techniques.technique3.activation "action-attack-defense")}}selected{{/if}}>{{ localize "CDE.ActivationAttackOrDefense" }}</option>
                <option value="reaction" {{#if (eq systemData.techniques.technique3.activation "reaction")}}selected{{/if}}>{{ localize "CDE.ActivationReaction" }}</option>
                <option value="dice" {{#if (eq systemData.techniques.technique3.activation "dice")}}selected{{/if}}>{{ localize "CDE.ActivationDice" }}</option>
                <option value="damage-inflicted" {{#if (eq systemData.techniques.technique3.activation "damage-inflicted")}}selected{{/if}}>{{ localize "CDE.ActivationDamageInflicted" }}</option>
                <option value="damage-received" {{#if (eq systemData.techniques.technique3.activation "damage-received")}}selected{{/if}}>{{ localize "CDE.ActivationDamageReceived" }}</option>
              </select>
            </div>
          </div>
        </header>
        <div class="cde-technique-body">
          {{formInput systemFields.techniques.fields.technique3.fields.technique enriched=descriptionTechnique3HTML value=system.techniques.technique3.technique name="system.techniques.technique3.technique" toggled=true}}
        </div>
      </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>
