<form class="skill-roll-dialog">
  <header class="roll-dialog-header">
    <h1 class="dialog-roll-title roll-dialog-header">Joueur : {{user.name}}</h1>
  </header>

    <div class="flexcol">

      {{#if (eq state "select-player")}}
      <div class="flexrow">
        <span>Sélectionnez le joueur pour faire le tirage</span>
        <select id="playerId" name="playerId">
          {{#select playerId}} 
            <option value="none"></option>
            {{#each players as |player id|}} 
              <option value="{{player._id}}">{{player.name}}</option>
            {{/each}}
          {{/select}}
        </select>
      </div> 
      {{/if}}

      {{#if (eq state "attribute-to-actor")}}
      <div class="flexrow">
        <span>Sélectionnez l'acteur pour lui attribuer les tarots</span>
        <select id="actorId" name="actorId">
          {{#select actorId}} 
            <option value="none"></option>
            {{#each actors as |actor id|}} 
              <option value="{{actor._id}}">{{actor.name}}</option>
            {{/each}}
          {{/select}}
        </select>
      </div> 
      {{/if}}

      <div class="flexcol">
        <span><h2>Main du joueur : </h2></span>
        <div class="flexrow">
          {{#each cards as |card index|}} 
            <div class="flexcol">
              <div class="tarot-fixed-width flexcol">
                <img class="tarot-fixed-width {{#if card.system.ispositif}} {{else}}flip-tarot{{/if}}" src="{{card.img}}">
                <span class="tarot-title">{{card.name}}</span>
                {{#if card.system.isdualside}}
                  <span class="tarot-title">{{#if card.system.ispositif}}Positif{{else}}Négatif{{/if}}</span>
                {{/if}}
              </div>
            </div>
          {{/each}}
        </div> 

        <hr>
        <span><h2>Main secrête : </h2></span>
        <div class="flexrow">
          {{#each secretCards as |card index|}} 
            <div class="flexcol">
              <div class="tarot-fixed-width  flexcol">
                <img class="tarot-fixed-width {{#if card.system.ispositif}} {{else}}flip-tarot{{/if}}" src="{{card.img}}">
                <span class="tarot-title">{{card.name}}</span>
                {{#if card.system.isdualside}}
                  <span class="tarot-title">{{#if card.system.ispositif}}Positif{{else}}Négatif{{/if}}</span>
                {{/if}}
              </div>
            </div>
          {{/each}}
        </div> 

      </div>

  </div>

</form>