<div class="cde-aspects-header">
  <img class="cde-aspects-logo" src="systems/fvtt-chroniques-de-l-etrange/images/logo_jeu.webp" title="奇闻异事 ● Hong Kong – Les Chroniques de l'Étrange" alt="Logo" />
</div>
<div class="cde-aspects-grid">

  <div class="cde-aspect-card cde-aspect--fire">
    <div class="cde-aspect-top">
      <img class="cde-aspect-gif" src="systems/fvtt-chroniques-de-l-etrange/images/cde_feu.webp" alt="Feu" />
      <span class="cde-aspect-name">{{ localize "CDE.Fire" }}</span>
    </div>
    <div class="cde-aspect-roll">
      <span class="cde-roll-trigger" data-libel-id="fire-aspect" title="{{ localize 'CDE.Die' }}{{ localize 'CDE.Fire' }}">
        <span class="cde-dice-plate-css small" data-value="10"></span>
      </span>
      <input class="cde-circle-input" type="number" min="0" name="system.aspect.fire.value" value="{{systemData.aspect.fire.value}}" />
    </div>
    <div class="cde-aspect-qual">{{ localize "CDE.FireQualities" }}</div>
  </div>

  <div class="cde-aspect-card cde-aspect--wood">
    <div class="cde-aspect-top">
      <img class="cde-aspect-gif" src="systems/fvtt-chroniques-de-l-etrange/images/cde_bois.webp" alt="Bois" />
      <span class="cde-aspect-name">{{ localize "CDE.Wood" }}</span>
    </div>
    <div class="cde-aspect-roll">
      <span class="cde-roll-trigger" data-libel-id="wood-aspect" title="{{ localize 'CDE.Die' }}{{ localize 'CDE.Wood' }}">
        <span class="cde-dice-plate-css small" data-value="10"></span>
      </span>
      <input class="cde-circle-input" type="number" min="0" name="system.aspect.wood.value" value="{{systemData.aspect.wood.value}}" />
    </div>
    <div class="cde-aspect-qual">{{ localize "CDE.WoodQualities" }}</div>
  </div>

  <div class="cde-aspect-card cde-aspect--earth">
    <div class="cde-aspect-top">
      <img class="cde-aspect-gif" src="systems/fvtt-chroniques-de-l-etrange/images/cde_terre.webp" alt="Terre" />
      <span class="cde-aspect-name">{{ localize "CDE.Earth" }}</span>
    </div>
    <div class="cde-aspect-roll">
      <span class="cde-roll-trigger" data-libel-id="earth-aspect" title="{{ localize 'CDE.Die' }}{{ localize 'CDE.Earth' }}">
        <span class="cde-dice-plate-css small" data-value="10"></span>
      </span>
      <input class="cde-circle-input" type="number" min="0" name="system.aspect.earth.value" value="{{systemData.aspect.earth.value}}" />
    </div>
    <div class="cde-aspect-qual">{{ localize "CDE.EarthQualities" }}</div>
  </div>

  <div class="cde-aspect-card cde-aspect--water">
    <div class="cde-aspect-top">
      <img class="cde-aspect-gif" src="systems/fvtt-chroniques-de-l-etrange/images/cde_eau.webp" alt="Eau" />
      <span class="cde-aspect-name">{{ localize "CDE.Water" }}</span>
    </div>
    <div class="cde-aspect-roll">
      <span class="cde-roll-trigger" data-libel-id="water-aspect" title="{{ localize 'CDE.Die' }}{{ localize 'CDE.Water' }}">
        <span class="cde-dice-plate-css small" data-value="10"></span>
      </span>
      <input class="cde-circle-input" type="number" min="0" name="system.aspect.water.value" value="{{systemData.aspect.water.value}}" />
    </div>
    <div class="cde-aspect-qual">{{ localize "CDE.WaterQualities" }}</div>
  </div>

  <div class="cde-aspect-card cde-aspect--metal">
    <div class="cde-aspect-top">
      <img class="cde-aspect-gif" src="systems/fvtt-chroniques-de-l-etrange/images/cde_metal.webp" alt="Metal" />
      <span class="cde-aspect-name">{{ localize "CDE.Metal" }}</span>
    </div>
    <div class="cde-aspect-roll">
      <span class="cde-roll-trigger" data-libel-id="metal-aspect" title="{{ localize 'CDE.Die' }}{{ localize 'CDE.Metal' }}">
        <span class="cde-dice-plate-css small" data-value="10"></span>
      </span>
      <input class="cde-circle-input" type="number" min="0" name="system.aspect.metal.value" value="{{systemData.aspect.metal.value}}" />
    </div>
    <div class="cde-aspect-qual">{{ localize "CDE.MetalQualities" }}</div>
  </div>

</div>
<div class="cde-nghang-diagram">
  <img src="systems/fvtt-chroniques-de-l-etrange/images/nghang_long.webp" alt="Ng Hang"
       data-action="zoom-diagram"
       title="{{ localize 'CDE.ZoomDiagram' }}" />
</div>
