<div class="fvtt-hamalron-roll-dialog">

  {{#if (eq rollType "competence")}}
    <fieldSet>
      <legend>{{localize "HAMALRON.Label.competence"}}</legend>

      <div class="dialog-info">
        <div class="actor-info">
          <img
            src="{{actorImage}}"
            alt="{{actorName}}"
            class="actor-portrait"
          />
          <span class="actor-name">{{actorName}}</span>
        </div>

        <div class="competence-info">
          <h3>{{rollItem.name}}</h3>
          <div class="competence-details">
            <span class="competence-symbole">{{localize
                "HAMALRON.Label.symbole"
              }}:
              {{upperFirst rollItem.system.carteSymbole}}</span>
            <span class="competence-niveau">{{localize
                "HAMALRON.Label.niveau"
              }}:
              {{rollItem.system.niveau}}
              ({{competenceModifier}})</span>
          </div>
        </div>
      </div>
    </fieldSet>

    <fieldSet>
      <legend>{{localize "HAMALRON.Label.selectTarotCard"}}</legend>

      <div class="tarot-hand">
        {{#if tarotCards}}
          {{#each tarotCards as |card|}}
            <div
              class="tarot-card-select {{#if card.isSuccessCard}}success-card{{/if}}"
              data-card-id="{{card.id}}"
              data-card-symbole="{{card.system.symbole}}"
              data-card-valeur="{{card.system.valeur}}"
              data-card-type="{{card.system.type}}"
              data-is-success-card="{{card.isSuccessCard}}"
            >
              <img
                src="{{card.img}}"
                alt="{{card.name}}"
                data-tooltip="{{card.name}}"
              />
              <span class="card-name">{{card.name}}</span>
              {{#if card.isSuccessCard}}<span class="success-indicator"><i class="fas fa-star"></i></span>{{/if}}
              <span class="card-values"></span>
            </div>
          {{/each}}
        {{else}}
          <p>{{localize "HAMALRON.Notifications.noTarotCards"}}</p>
        {{/if}}
      </div>
    </fieldSet>

    <fieldSet>
      <legend>{{localize "HAMALRON.Label.difficulty"}}</legend>
      <div class="difficulty-row">
        <select name="difficulty" class="difficulty-select"   class="difficulty-select-input">
          {{selectOptions
            difficultyChoices
            selected="soustension_oppose"
            localize=false
          }}
        </select>
        <button type="button" id="draw-difficulty-btn" class="draw-difficulty-btn" title="{{localize 'HAMALRON.Roll.drawCard'}}">
          <i class="fas fa-cards"></i>
        </button>
      </div>
      <div id="drawn-card-info" class="drawn-card-info">
        <span id="drawn-card-name"></span>
      </div>
    </fieldSet>

    <fieldSet class="dialog-result">
      <legend>{{localize "HAMALRON.Label.total"}}</legend>
      <div class="total-display">
        <span id="competence-modifier">{{competenceModifier}}</span>
        <span id="card-value-display">+ 0</span>
        <span>=</span>
        <span id="total-value">{{competenceModifier}}</span>
      </div>
      <div id="difficulty-info" class="difficulty-info">
        <span>{{localize "HAMALRON.Label.targetScore"}}:
          <span id="target-score">-</span></span>
      </div>
    </fieldSet>
  {{/if}}

  <fieldSet>
    <legend>{{localize "HAMALRON.Label.rollView"}}</legend>
    <select name="visibility">
      {{selectOptions rollModes selected=visibility localize=true}}
    </select>
  </fieldSet>

</div>