<div class="fvtt-hamalron-sortilege-dialog">
  <div class="dialog-info">
    <img src="{{actorImage}}" alt="{{actorName}}" class="actor-portrait" />
    <div class="spell-info">
      <h3>{{spell.name}}</h3>
      <span class="spell-meta">{{categorieLabel}} · {{niveauLabel}}</span>
      <span class="spell-meta">{{localize "HAMALRON.Sortilege.rang"}} : {{rangLabel}}</span>
    </div>
  </div>

  <fieldset>
    <legend>{{localize "HAMALRON.Sortilege.difficulty"}}</legend>
    <div class="difficulty-row">
      <button type="button" id="draw-card-btn" class="draw-btn">
        <i class="fas fa-cards"></i> {{localize "HAMALRON.Sortilege.drawCard"}}
      </button>
    </div>
    <div class="difficulty-row">
      <label>{{localize "HAMALRON.Sortilege.cardDrawn"}} :</label>
      <span id="carte-mj-nom">-</span>
    </div>
    <div class="difficulty-row">
      <label>{{localize "HAMALRON.Sortilege.cardValue"}} :</label>
      <input type="number" id="carte-mj" name="carte-mj" value="0" min="0" max="23" />
    </div>
    <div class="difficulty-row">
      <label>{{localize "HAMALRON.Sortilege.modifier"}} :</label>
      <span>{{modificateur}}</span>
    </div>
    <div class="difficulty-row">
      <label>{{localize "HAMALRON.Sortilege.totalDifficulty"}} :</label>
      <span id="difficulte-totale">0</span>
    </div>
  </fieldset>

  <fieldset>
    <legend>{{localize "HAMALRON.Sortilege.selectAtouts"}}</legend>
    <p class="hint">{{localize "HAMALRON.Sortilege.atoutHint"}}</p>
    <div class="card-select-grid">
      {{#each atouts}}
        <label class="card-option">
          <input type="checkbox" name="atout" value="{{this.id}}" data-value="{{this.valeurNumerique}}" />
          <img src="{{this.img}}" alt="{{this.name}}" />
          <span>{{this.name}} ({{this.valeurNumerique}})</span>
        </label>
      {{else}}
        <p class="no-cards">{{localize "HAMALRON.Sortilege.noAtout"}}</p>
      {{/each}}
    </div>
    <div class="card-total">
      <label>{{localize "HAMALRON.Sortilege.atoutTotal"}} :</label>
      <span id="total-atouts">0</span>
    </div>
  </fieldset>

  {{#if peutUtiliserCoupe}}
  <fieldset>
    <legend>{{localize "HAMALRON.Sortilege.selectCoupe"}}</legend>
    <p class="hint">{{localize "HAMALRON.Sortilege.coupeHint"}}</p>
    <div class="card-select-grid">
      {{#each cartesCoupe}}
        <label class="card-option">
          <input type="checkbox" name="coupe" value="{{this.id}}" data-value="{{this.valeurNumerique}}" />
          <img src="{{this.img}}" alt="{{this.name}}" />
          <span>{{this.name}} ({{this.valeurNumerique}})</span>
        </label>
      {{else}}
        <p class="no-cards">{{localize "HAMALRON.Sortilege.noCoupe"}}</p>
      {{/each}}
    </div>
    <div class="card-total">
      <label>{{localize "HAMALRON.Sortilege.coupeTotal"}} :</label>
      <span id="total-coupe">0</span>
    </div>
  </fieldset>
  {{/if}}

  <fieldset class="result-row">
    <legend>{{localize "HAMALRON.Sortilege.total"}}</legend>
    <div class="total-display">
      <span>{{localize "HAMALRON.Sortilege.playerTotal"}} : <strong id="total-joueur">0</strong></span>
    </div>
  </fieldset>
</div>
