{{!-- Loksyu standalone app --}}
<div class="cde-loksyu-app-body">

  <div class="cde-loksyu-elements">
    {{#each elements as |el|}}
    <div class="cde-lok-card cde-lok-card--{{el.key}}">
      <div class="cde-lok-header">
        <img class="cde-lok-icon" src="{{el.img}}" alt="{{localize el.nameKey}}" width="32" height="32" />
        <div class="cde-lok-titles">
          <span class="cde-lok-name">{{ localize el.nameKey }}</span>
          <span class="cde-lok-qual">{{ localize el.qualKey }}</span>
        </div>
        <a class="cde-lok-reset" data-action="resetElement" data-element="{{el.key}}" title="{{ localize 'CDE.Reset' }}">
          <i class="fas fa-rotate-left"></i>
        </a>
      </div>
      <div class="cde-lok-values">
        <div class="cde-lok-polarity cde-lok-polarity--yang">
          <span class="cde-lok-pol-label">○ {{ localize "CDE.Yang" }}</span>
          <input class="cde-lok-input" type="number" min="0"
            data-field="{{el.key}}.yang"
            value="{{el.yang}}"
            {{#unless ../canEdit}}disabled{{/unless}} />
        </div>
        <div class="cde-lok-polarity cde-lok-polarity--yin">
          <span class="cde-lok-pol-label">● {{ localize "CDE.Yin" }}</span>
          <input class="cde-lok-input" type="number" min="0"
            data-field="{{el.key}}.yin"
            value="{{el.yin}}"
            {{#unless ../canEdit}}disabled{{/unless}} />
        </div>
      </div>
    </div>
    {{/each}}
  </div>

  <div class="cde-loksyu-visual-row">
    <img class="cde-lok-visual" src="systems/fvtt-chroniques-de-l-etrange/images/loksyu_long.webp" alt="Loksyu" />
  </div>

  {{#if canEdit}}
  <div class="cde-lok-footer">
    <button class="cde-lok-reset-all" data-action="resetAll">
      <i class="fas fa-rotate-left"></i> {{ localize "CDE.ResetAll" }}
    </button>
  </div>
  {{/if}}

</div>