<form class="flip-dialog">
  
  <h2 class="compdialog" id="statSkillFlip">Flip Dialog !</h2>
  
    <div class="flexrow">
      <div class="flexcol">
        {{#if (eq mode 'stat')}}
        <label class="dialog-label" id="flipSubTitle">Stat Only Flip :</label>
        <label class="dialog-label">
           {{localize stat.label}} : {{stat.value}} - <img class="cardsuit-img" src="systems/foundryvtt-shadows-over-sol/img/cards/{{stat.cardsuit}}.webp"/>
        </label>
        <span>
          <label class="dialog-label" id="flipSubTitle">Final Score : <span id='score-base'>0</span> </h3>
        </span>
        {{else}}
        <label class="dialog-label" id="flipSubTitle">Select Stat</h3>
        <select name="stat" id="statSelect" data-dtype="String">
          {{#select statList}}
          {{#each statList as |stat key|}}
          <option value={{key}} {{#if (eq key ../selectedStat)}}selected{{/if}}>{{localize stat.label}} : {{stat.value}} - {{stat.cardsuit}} </option>
          {{/each}}
          {{/select}}
        </select>        
        <span>
          <h3 class="dialog-label" id="flipSubTitle">Skill Flip : {{skill.name}} ({{skill.system.value}}) </h3>
          <h3 class="dialog-label" id="flipSubTitle">Final Score : <span id='score-base'>0</span> </h3>
        </span>
        {{/if}}
      </div>
      <div class="flexcol">
        <div class="tab" data-group="primary">
          <select name="skillXPSelect" id="skillXPBonus" data-dtype="String" multiple size="5" width="200">
            {{#select skillExperienceList}}
            {{#each skillExperienceList as |skillXP key|}}
            <option value={{skillXP._id}}>{{skillXP.name}}</option>
            {{/each}}
            {{/select}}
          </select>  
          <h3 class="dialog-label" id="flipSkillXPBonus">Skill XP Bonus : <span id='skillxp-bonus'>0</span> </h3>
        </div>
      </div>
      <div class="flexcol">
        <div class="tab" data-group="primary">
          <select name="consequenceSelect" id="consequenceSelectMalus" data-dtype="String" multiple size="5" width="200">
            {{#select consequencesList}}
            {{#each consequencesList as |consequence key|}}
            <option value={{consequence._id}}>{{localize consequence.name}} - {{consequence.system.severity}}</option>
            {{/each}}
            {{/select}}
          </select>  
          <h3 class="dialog-label" id="flipConsequenceMalus">Consequences Malus : <span id='consequence-malus'>0</span> </h3>
        </div>
      </div>
      <div class="flexcol">
        <div class="tab" data-group="primary">
          <select name="consequenceSelect" id="consequenceSelectBonus" data-dtype="String" multiple size="5" width="200">
            {{#select consequencesList}}
            {{#each consequencesList as |consequence key|}}
            <option value={{consequence._id}}>{{localize consequence.name}} - {{consequence.system.severity}}</option>
            {{/each}}
            {{/select}}
          </select>  
          <h3 class="dialog-label" id="flipConsequenceBonus">Consequences Bonus : <span id='consequence-bonus'>0</span> </h3>
        </div>
      </div>
      <div class="flexcol">
        <div class="tab" data-group="primary">
          {{#each weaknessList as |weakness key|}}
          <span class="dialog-label">{{localize weakness.name}} - {{weakness.system.category}}</span>
          {{/each}}
        </div>
      </div>
      <div class="flexcol">
        {{#if (gt wounds.light 0)}}
        <span><label class="dialog-label">Apply Light Wound Malus:</label><input type="checkbox" name="wound-light-checkbox" id="wound-light-checkbox"></span>
        {{/if}}
        {{#if (gt wounds.moderate 0)}}
        <span><label class="dialog-label">Apply Moderate Wound Malus:</label><input type="checkbox" name="wound-moderate-checkbox" id="wound-moderate-checkbox"></span>
        {{/if}}
        {{#if (gt wounds.severe 0)}}
        <span><label class="dialog-label">Apply Severe Wound Malus:</label><input type="checkbox" name="wound-severe-checkbox" id="wound-severe-checkbox"></span>
        {{/if}}
        {{#if (gt wounds.critical 0)}}
        <span><label class="dialog-label">Apply Critical Wound Malus:</label><input type="checkbox" name="wound-critical-checkbox" id="wound-critical-checkbox"></span>
        {{/if}}
        <h3 class="dialog-label" id="flipWoundMalus">Wounds Malus : <span id='wound-malus'>0</span> </h3>
      </div>        
    </div>
  </div>
  <hr>
  {{#if target}}
  <div>
    <h4>Target : {{target.actor.name}} - Defense : {{target.actor.system.scores.defense.value}}/{{target.actor.system.scores.defense.critical}}</h4>
  </div>
  {{/if}}

  <section class="sheet-body">
    <div class="tab" data-group="primary">
      <div class="flexrow">
        <label for="categorie" class="dialog-label">Target Number (TN) : </label>
        {{#if target}}
        <label for="categorie" class="dialog-label"> {{target.actor.system.scores.defense.value}} </label>
        {{else}}
        <select name="tn" id="tn" data-dtype="number">
          {{#select tn}}
          {{#each tnList as |key|}}
          <option value={{key}} {{#if (eq key 10)}}selected{{/if}}>{{numberFormat key decimals=0 sign=false}}</option>
          {{/each}}
          {{/select}}
        </select>
        {{/if}}
        <label for="categorie" class="dialog-label"> Flip Modifier (GM bonus/malus)</label>
        <select name="modifier" id="modifier" data-dtype="number">
          {{#select modifier}}
          {{#each modifierList as |key|}}
          <option value={{key}} {{#if (eq key 0)}}selected{{/if}}>{{numberFormat key decimals=0 sign=true}}</option>
          {{/each}}
          {{/select}}
        </select>
      </div>
    </div>
    <hr>
    <div class="flexcol">
      <label class="dialog-label">Click on deck to flip from deck, or click on the relevant Edge card to flip from it!</label>

      <label class="dialog-label flexrow">Discard Edge for Luck (ie force Trump) when clicking : 
          <span class="attribute-value checkbox"><input type="checkbox" name="edge-luck" id="edge-luck"/></span>
      </label>
    </div>
    <div class="flexrow">
      <span class="class-view-deck" id="view-deck"></span>
      <span class="class-view-edge" id="view-edge"></span>
    </div>
    <div class="flexrow">  
      <label class="dialog-label"></label>
    </div>
  </section>

</form>