{{! Roue d'Initiative — Chroniques de l'Étrange }}
<div class="cde-wheel-layout">

  {{! ── SVG Wheel ── }}
  <div class="cde-wheel-svg-container">
    {{#if hasCombat}}
    <svg class="cde-wheel-svg" viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">

      {{! Background circle }}
      <circle cx="200" cy="200" r="190" fill="#0d0d1a" stroke="#2a2a4a" stroke-width="1"/>

      {{! Cran slots — 24 positions, arranged counter-clockwise from bottom }}
      {{#each cranData}}
        {{#with (cranPosition cran 200 200 158)}}
        <g class="cde-wheel-cran {{#if ../fighters.length}}cde-wheel-cran--occupied{{/if}}"
           data-cran="{{../cran}}">
          <circle cx="{{x}}" cy="{{y}}" r="19"
                  fill="{{../segment.color}}"
                  stroke="{{../segment.textColor}}"
                  stroke-width="{{#if ../fighters.length}}2.5{{else}}1.5{{/if}}"
                  opacity="{{#if ../fighters.length}}1{{else}}0.65{{/if}}"/>
          <text x="{{x}}" y="{{y}}"
                text-anchor="middle"
                dominant-baseline="central"
                font-size="12"
                font-family="var(--cde-font-primary, sans-serif)"
                fill="{{../segment.textColor}}"
                font-weight="bold">{{../cran}}</text>

          {{! Combatant avatar(s) on this cran — placed above the cran circle }}
          {{#each ../fighters}}
          <image href="{{img}}"
                 x="{{fighterX ../x @index ../fighters.length}}"
                 y="{{fighterY ../y @index ../fighters.length}}"
                 width="30" height="30"
                 clip-path="circle()"
                 class="cde-wheel-fighter {{#if isActive}}cde-wheel-fighter--active{{/if}}"
                 style="filter: drop-shadow(0 0 4px #fff)"/>
          {{/each}}
        </g>
        {{/with}}
      {{/each}}

      {{! Centre: system name }}
      <text x="200" y="192" text-anchor="middle" font-size="13"
            font-family="var(--cde-font-primary, sans-serif)"
            fill="#5a5a9a" letter-spacing="1">CHRONIQUES</text>
      <text x="200" y="210" text-anchor="middle" font-size="11"
            font-family="var(--cde-font-primary, sans-serif)"
            fill="#4a4a7a" letter-spacing="1">DE L'ÉTRANGE</text>

      {{! Reference marker at bottom (cran 0 / position between 24 and 1) }}
      <polygon points="200,378 194,393 206,393"
               fill="#ff6633" opacity="0.9"/>
      <text x="200" y="400" text-anchor="middle" font-size="9"
            fill="#ff6633" font-family="var(--cde-font-primary, sans-serif)">
        {{ localize "CDE.WheelReference" }}
      </text>

    </svg>
    {{! Wu Xing colour legend — HTML strip below SVG }}
    <div class="cde-wheel-legend">
      <span class="cde-wheel-legend-dot" style="background:#b8c4cc"></span>Métal
      <span class="cde-wheel-legend-dot" style="background:#3a7bd5"></span>Eau
      <span class="cde-wheel-legend-dot" style="background:#c8a84b"></span>Terre
      <span class="cde-wheel-legend-dot" style="background:#d94f3d"></span>Feu
      <span class="cde-wheel-legend-dot" style="background:#4a9b5a"></span>Bois
    </div>
    {{else}}
    <div class="cde-wheel-no-combat">
      <i class="fa-solid fa-circle-notch cde-wheel-no-combat-icon"></i>
      <p>{{ localize "CDE.NoCombatActive" }}</p>
    </div>
    {{/if}}
  </div>

  {{! ── Right panel: combatant list + actions ── }}
  <div class="cde-wheel-panel">

    {{! Combatant list }}
    <div class="cde-wheel-combatants">
      <div class="cde-wheel-section-title">{{ localize "CDE.Combatants" }}</div>
      {{#if hasCombat}}
      {{#each combatants}}
      <div class="cde-wheel-combatant {{#if isSelected}}cde-wheel-combatant--selected{{/if}} {{#if isActive}}cde-wheel-combatant--active{{/if}}"
           data-select-combatant="{{id}}">
        <img class="cde-wheel-combatant-img" src="{{img}}" alt="{{name}}"/>
        <span class="cde-wheel-combatant-name">{{name}}</span>
        <span class="cde-wheel-combatant-cran"
              style="background: {{segment.color}}; color: {{segment.textColor}}">
          {{initiative}}
        </span>
        {{#if isActive}}<i class="fa-solid fa-bolt cde-wheel-active-marker" title="{{ localize 'CDE.ActiveCombatant' }}"></i>{{/if}}
      </div>
      {{/each}}
      {{else}}
      <p class="cde-wheel-hint">{{ localize "CDE.NoCombatActive" }}</p>
      {{/if}}
    </div>

    {{! Action cost panel — only shown when a combatant is selected }}
    {{#if selected}}
    <div class="cde-wheel-actions">
      <div class="cde-wheel-section-title">
        {{ localize "CDE.AdvanceCombatant" }} — <em>{{selectedName}}</em>
      </div>

      <div class="cde-wheel-action-grid">
        {{#each actionCosts}}
        <button type="button"
                class="cde-wheel-action-btn"
                data-action="advanceCran"
                data-cost="{{cost}}"
                title="{{label}} ({{cost}} crans)">
          <span class="cde-wheel-action-name">{{label}}</span>
          <span class="cde-wheel-action-cost">−{{cost}}</span>
        </button>
        {{/each}}
      </div>

      <div class="cde-wheel-special-actions">
        <button type="button"
                class="cde-wheel-btn-roll"
                data-action="rollInitiative"
                title="{{ localize 'CDE.DeterminateInitiative' }}">
          <i class="fa-solid fa-dice-d10"></i>
          {{ localize "CDE.InitiativeRoll" }}
        </button>
        <button type="button"
                class="cde-wheel-btn-surprise"
                data-action="setSurprised"
                title="{{ localize 'CDE.SurprisedHint' }}">
          <i class="fa-solid fa-exclamation-triangle"></i>
          {{ localize "CDE.SurprisedAction" }}
        </button>
      </div>
    </div>
    {{else}}
    <div class="cde-wheel-actions cde-wheel-actions--hint">
      <p class="cde-wheel-hint">
        <i class="fa-solid fa-hand-pointer"></i>
        {{ localize "CDE.SelectCombatantHint" }}
      </p>
    </div>
    {{/if}}

  </div>{{! end panel }}
</div>{{! end layout }}