{{!-- Tin Ji standalone app --}}
<div class="cde-tinji-app-body">

  <div class="cde-tinji-display">
    <div class="cde-tinji-chinese-large">天機</div>
    <div class="cde-tinji-label">{{ localize "CDE.UpperCaseTinJi" }}</div>

    <div class="cde-tinji-counter">
      {{#if canEdit}}
      <button class="cde-tinji-step" data-action="decrement" title="{{ localize 'CDE.Decrement' }}">−</button>
      {{/if}}
      <input class="cde-tinji-direct" type="number" min="0" value="{{value}}"
        {{#unless canEdit}}disabled{{/unless}} />
      {{#if canEdit}}
      <button class="cde-tinji-step" data-action="increment" title="{{ localize 'CDE.Increment' }}">+</button>
      {{/if}}
    </div>

    <div class="cde-tinji-hint">{{ localize "CDE.AuspiciousDice" }}</div>

    <div class="cde-tinji-actions">
      <button class="cde-tinji-spend-btn" data-action="spend" {{#unless value}}disabled{{/unless}}>
        <i class="fas fa-star"></i> {{ localize "CDE.SpendTinji" }}
      </button>
      {{#if canEdit}}
      <button class="cde-tinji-reset-btn" data-action="reset">
        <i class="fas fa-rotate-left"></i> {{ localize "CDE.Reset" }}
      </button>
      {{/if}}
    </div>
  </div>

  <img class="cde-tinji-visual" src="systems/fvtt-chroniques-de-l-etrange/images/tinji.webp" alt="Tin Ji" />

</div>