<div class="tirage-tarot-dialog">

  {{!-- Sélection joueur ou attribution acteur --}}
  {{#if (eq state "select-player")}}
  <div class="tirage-select-row">
    <label class="tirage-select-label">Sélectionnez le joueur pour le tirage</label>
    <select id="playerId" name="playerId" class="tirage-select">
      <option value="none">— choisir —</option>
      {{#each players as |player id|}}
        <option value="{{player._id}}">{{player.name}}</option>
      {{/each}}
    </select>
  </div>
  {{/if}}

  {{#if (eq state "attribute-to-actor")}}
  <div class="tirage-select-row tirage-attribute-row">
    <label class="tirage-select-label">Attribuer les tarots à un personnage</label>
    <select id="actorId" name="actorId" class="tirage-select">
      <option value="none">— choisir —</option>
      {{#each actors as |actor id|}}
        <option value="{{actor._id}}">{{actor.name}}</option>
      {{/each}}
    </select>
  </div>
  {{/if}}

  {{!-- Main du joueur --}}
  <div class="tirage-section">
    <div class="tirage-section-title">
      <i class="fa-solid fa-hand"></i> Main du joueur
      {{#if user}}<span class="tirage-player-name">— {{user.name}}</span>{{/if}}
    </div>
    <div class="tirage-cards-row">
      {{#each cards as |card|}}
        <div class="tirage-card {{#unless card.system.ispositif}}tirage-card-negatif{{/unless}}">
          <img class="tirage-card-img {{#unless card.system.ispositif}}flip-tarot{{/unless}}" src="{{card.img}}" alt="{{card.name}}" />
          <div class="tirage-card-name">{{card.name}}</div>
          {{#if card.system.isdualside}}
            <div class="tirage-card-side {{#if card.system.ispositif}}tirage-positif{{else}}tirage-negatif{{/if}}">
              {{#if card.system.ispositif}}⬆ Positif{{else}}⬇ Négatif{{/if}}
            </div>
          {{/if}}
        </div>
      {{/each}}
    </div>
  </div>

  <div class="tirage-separator"></div>

  {{!-- Main secrète --}}
  <div class="tirage-section">
    <div class="tirage-section-title tirage-secret-title">
      <i class="fa-solid fa-eye-slash"></i> Main secrète
    </div>
    <div class="tirage-cards-row">
      {{#each secretCards as |card|}}
        <div class="tirage-card tirage-card-secret {{#unless card.system.ispositif}}tirage-card-negatif{{/unless}}">
          <img class="tirage-card-img {{#unless card.system.ispositif}}flip-tarot{{/unless}}" src="{{card.img}}" alt="{{card.name}}" />
          <div class="tirage-card-name">{{card.name}}</div>
          {{#if card.system.isdualside}}
            <div class="tirage-card-side {{#if card.system.ispositif}}tirage-positif{{else}}tirage-negatif{{/if}}">
              {{#if card.system.ispositif}}⬆ Positif{{else}}⬇ Négatif{{/if}}
            </div>
          {{/if}}
        </div>
      {{/each}}
    </div>
  </div>

  <footer class="tirage-footer">
    <button type="button" class="tirage-close-btn">
      <i class="fa-solid fa-times"></i> Fermer
    </button>
  </footer>

</div>