{{!-- templates/speed-die-panel.hbs --}}
<div class="sotc-bsa-panel" data-token-id="{{tokenId}}" data-combatant-id="{{combatantId}}">

  {{!-- HEADER : icône + nom du token --}}
  <div class="bsa-header">
    <div class="bsa-token-info">
      <img class="bsa-token-img open-sheet" src="{{tokenImg}}" alt="{{tokenName}}" title="{{localize 'SOTC_BSA.Panel.OpenSheet'}}" data-actor-id="{{actorId}}" />
      <div class="bsa-token-name">
        <span>{{tokenName}}</span>
        {{#if isClone}}
          <span class="bsa-die-index">Dé {{dieNumber}}</span>
        {{/if}}
      </div>
    </div>
  </div>

  {{!-- STATS --}}
  <div class="bsa-stats">
    {{!-- PV --}}
    <div class="bsa-stat-row">
      <img class="bsa-stat-icon" src="systems/sotc/assets/sheets/HPIcon.webp" alt="HP" title="{{localize 'SOTC_BSA.Panel.HP'}}" />
      <span class="bsa-stat-label">{{localize 'SOTC_BSA.Panel.HP'}}</span>
      <div class="bsa-bar-wrap">
        <div class="bsa-bar bsa-bar-hp" style="width: {{hpPercent}}%"></div>
      </div>
      <span class="bsa-stat-value">{{hpValue}} / {{hpMax}}</span>
    </div>
    {{!-- STAGGER --}}
    <div class="bsa-stat-row">
      <img class="bsa-stat-icon" src="systems/sotc/assets/sheets/StaggerIcon.webp" alt="Stagger" title="{{localize 'SOTC_BSA.Panel.Stagger'}}" />
      <span class="bsa-stat-label">{{localize 'SOTC_BSA.Panel.Stagger'}}</span>
      <div class="bsa-bar-wrap">
        <div class="bsa-bar bsa-bar-stagger" style="width: {{staggerPercent}}%"></div>
      </div>
      <span class="bsa-stat-value">{{staggerValue}} / {{staggerMax}}</span>
    </div>
    {{!-- LUMIERE --}}
    <div class="bsa-stat-row bsa-stat-simple">
      <img class="bsa-stat-icon" src="systems/sotc/assets/sheets/LightIcon.webp" alt="Light" title="{{localize 'SOTC_BSA.Panel.Light'}}" />
      <span class="bsa-stat-label">{{localize 'SOTC_BSA.Panel.Light'}}</span>
      <span class="bsa-stat-value bsa-light-value">{{lightValue}} / {{lightMax}}</span>
    </div>
    {{!-- EMOTION --}}
    <div class="bsa-stat-row bsa-stat-simple">
      <img class="bsa-stat-icon" src="systems/sotc/assets/sheets/EmotionIcon.webp" alt="Emotion" title="{{localize 'SOTC_BSA.Panel.Emotion'}}" />
      <span class="bsa-stat-label">{{localize 'SOTC_BSA.Panel.Emotion'}}</span>
      <span class="bsa-stat-value bsa-emotion-value">{{emotion}}</span>
    </div>
  </div>

  {{!-- COMPÉTENCE ASSIGNÉE --}}
  <div class="bsa-assigned-section">
    <div class="bsa-section-title">{{localize 'SOTC_BSA.Panel.AssignedSkill'}}</div>
    {{#if assignedSkill}}
      <div class="bsa-assigned-skill">
        <img class="bsa-assigned-img" src="{{assignedSkill.img}}" alt="{{assignedSkill.name}}" />
        <span class="bsa-assigned-name">{{assignedSkill.name}}</span>
        <button class="bsa-btn bsa-btn-unassign" data-action="unassign">✕</button>
      </div>
    {{else}}
      <div class="bsa-assigned-none">— {{localize 'SOTC_BSA.Panel.None'}} —</div>
    {{/if}}
    {{#if hasArrows}}
      <button class="bsa-btn bsa-btn-remove-arrows" title="{{localize 'SOTC_BSA.Panel.RemoveArrows'}}">
        🗑 {{localize 'SOTC_BSA.Panel.RemoveArrows'}}
      </button>
    {{/if}}
  </div>

  {{!-- ONGLETS COMPÉTENCES --}}
  <div class="bsa-tabs">
    <button class="bsa-tab active" data-tab="skills">{{localize 'SOTC_BSA.Panel.SkillsTab'}}</button>
    <button class="bsa-tab" data-tab="ego">{{localize 'SOTC_BSA.Panel.EgoTab'}}</button>
  </div>

  {{!-- LISTE DES COMPÉTENCES --}}
  <div class="bsa-tab-content bsa-tab-skills active">
    {{#if skills.length}}
      {{#each skills}}
        <div class="bsa-skill-row {{#if this.selected}}bsa-skill-selected{{/if}}" data-skill-id="{{this.id}}">
          <img class="bsa-skill-img" src="{{this.img}}" alt="{{this.name}}" />
          <div class="bsa-skill-info">
            <span class="bsa-skill-name">{{this.name}}</span>
            <div class="bsa-skill-costs">
              {{#if this.lightCost}}
                <span class="bsa-cost bsa-cost-light {{#unless this.canAffordLight}}bsa-cost-insufficient{{/unless}}">
                  ✦ {{this.lightCost}}
                </span>
              {{/if}}
              {{#if this.emotionCost}}
                <span class="bsa-cost bsa-cost-emotion {{#unless this.canAffordEmotion}}bsa-cost-insufficient{{/unless}}">
                  ◆ {{this.emotionCost}}
                </span>
              {{/if}}
              {{#if (gt this.weight 1)}}
                <span class="bsa-cost bsa-cost-weight" title="Attack Weight : {{this.weight}} cibles">
                  ⚖ {{this.weight}}
                </span>
              {{/if}}
            </div>
          </div>
          <button class="bsa-btn bsa-btn-assign" data-action="assign" data-skill-id="{{this.id}}" title="{{localize 'SOTC_BSA.Panel.Assign'}}">
            ＋
          </button>
        </div>
      {{/each}}
    {{else}}
      <div class="bsa-empty">{{localize 'SOTC_BSA.Panel.NoSkills'}}</div>
    {{/if}}
  </div>

  {{!-- LISTE EGO --}}
  <div class="bsa-tab-content bsa-tab-ego">
    {{#if egos.length}}
      {{#each egos}}
        <div class="bsa-skill-row {{#if this.selected}}bsa-skill-selected{{/if}}" data-skill-id="{{this.id}}">
          <img class="bsa-skill-img" src="{{this.img}}" alt="{{this.name}}" />
          <div class="bsa-skill-info">
            <span class="bsa-skill-name">{{this.name}}</span>
            <div class="bsa-skill-costs">
              {{#if this.lightCost}}
                <span class="bsa-cost bsa-cost-light {{#unless this.canAffordLight}}bsa-cost-insufficient{{/unless}}">
                  ✦ {{this.lightCost}}
                </span>
              {{/if}}
              {{#if this.emotionCost}}
                <span class="bsa-cost bsa-cost-emotion {{#unless this.canAffordEmotion}}bsa-cost-insufficient{{/unless}}">
                  ◆ {{this.emotionCost}}
                </span>
              {{/if}}
              {{#if (gt this.weight 1)}}
                <span class="bsa-cost bsa-cost-weight" title="Attack Weight : {{this.weight}} cibles">
                  ⚖ {{this.weight}}
                </span>
              {{/if}}
            </div>
          </div>
          <button class="bsa-btn bsa-btn-assign" data-action="assign" data-skill-id="{{this.id}}" title="{{localize 'SOTC_BSA.Panel.Assign'}}">
            ＋
          </button>
        </div>
      {{/each}}
    {{else}}
      <div class="bsa-empty">{{localize 'SOTC_BSA.Panel.NoEgo'}}</div>
    {{/if}}
  </div>

  {{!-- APERÇU DES DÉS DE LA COMPÉTENCE SÉLECTIONNÉE --}}
  {{#if selectedSkillPreview}}
    <div class="bsa-dice-preview">
      <div class="bsa-section-title">{{localize 'SOTC_BSA.Panel.DicePreview'}}</div>
      {{#if selectedSkillPreview.modules}}
        <div class="bsa-skill-modules">{{selectedSkillPreview.modules}}</div>
      {{/if}}
      <div class="bsa-dice-list">
        {{#each selectedSkillPreview.dice}}
          <div class="bsa-die-entry">
            <img class="bsa-die-type-img" src="systems/sotc/assets/dice types/{{this.type}}.png" alt="{{this.type}}" />
            <span class="bsa-die-formula">{{this.formula}}</span>
            {{#if this.mods.length}}
              <span class="bsa-die-tags">
                {{#each this.mods}}[{{this}}]{{/each}}
              </span>
            {{/if}}
          </div>
        {{/each}}
      </div>
    </div>
  {{/if}}

  {{!-- GESTION MANUELLE DE L'ÉTAT --}}
  <div class="bsa-state-section">
    <div class="bsa-section-title">{{localize 'SOTC_BSA.Panel.DieState'}}</div>
    <div class="bsa-state-buttons">
      <button class="bsa-state-btn {{#if (eq dieState 0)}}active{{/if}}" data-state="0" {{#if assignedSkill}}disabled{{/if}}>
        {{localize 'SOTC_BSA.Panel.StateUnused'}}
      </button>
      <button class="bsa-state-btn {{#if (eq dieState 1)}}active{{/if}}" data-state="1" {{#if assignedSkill}}disabled{{/if}}>
        {{localize 'SOTC_BSA.Panel.StateUsed'}}
      </button>
      <button class="bsa-state-btn {{#if (eq dieState 2)}}active{{/if}}" data-state="2" {{#if assignedSkill}}disabled{{/if}}>
        {{localize 'SOTC_BSA.Panel.StateSaved'}}
      </button>
      <button class="bsa-state-btn {{#if (eq dieState 3)}}active{{/if}}" data-state="3" {{#if assignedSkill}}disabled{{/if}}>
        {{localize 'SOTC_BSA.Panel.StateAssigned'}}
      </button>
    </div>
  </div>

</div>