<form>
  <div class="dice-roller-container">
    <div class="dice-roller-options">
      <div class="dice-roller-item">
        <div>Rolling for:</div>
        <div>{{itemName}}</div>
      </div>
      <div class="dice-roller-item">
        <div>Character Bonus:</div>
        <div>{{characterBonus}}</div>
      </div>
      <div class="dice-roller-item">
        <div>Difficulty:</div>
        <div>
          <select name="difficulty">
            {{selectOptions config.difficulties selected="0" valueKey="value" labelKey="label"}}
          </select>
        </div>
      </div>
      
      <div class="dice-roller-item">
        <div>% of hits taken malus:</div>
        <div>{{woundsModifier}}</div>
      </div>
      
      {{#if isStunned}}
      <div class="dice-roller-item">
        <div>Stunned:</div>
        <div>{{stunnedModifier}}</div>
      </div>
      {{/if}}
      
      <div class="dice-roller-item">
        <div>Combat situations:</div>
        <div>
          <select name="combatSituation">
            {{#select combatSituation}}
            {{#each config.combatSituations as |situation|}}
              <option value="{{situation.modifier}}">{{situation.label}}</option>
            {{/each}}
            {{/select}}
          </select>
        </div>
      </div>

      <div class="dice-roller-item">
        <div>Hits/round taken:</div>
        <div>
          <select name="hitsPerRound">
            {{#select hitsPerRound}}
            {{#each config.hitsPerRound as |hit|}}
              <option value="{{hit.modifier}}">{{hit.label}}</option>
            {{/each}}
            {{/select}}
          </select>
        </div>
      </div>

      <div class="dice-roller-item">
        <div>Lightning, if required:</div>
        <div>
          <select name="lightningModifier">
            {{#select lightningModifier}}
            {{#each config.lightOrDarknessModifiers as |lightning|}}
              <option value="{{lightning.modifierLight}}">{{lightning.label}}</option>
            {{/each}}
            {{/select}}
          </select>
        </div>
      </div>

      <div class="dice-roller-item">
        <div>Darkness, if advantageous:</div>
        <div>
          <select name="darknessModifier">
            {{#select lightningModifier}}
            {{#each config.lightOrDarknessModifiers as |darkness|}}
              <option value="{{darkness.modifierDark}}">{{darkness.label}}</option>
            {{/each}}
            {{/select}}
          </select>
        </div>
      </div>

      <div class="dice-roller-item">
        <div>Misc Bonus:</div>
        <div><input name="miscBonus" value="0" /></div>
      </div>
      <div class="roll-button-container">
        {{#each selectOptions as |option|}}
        <button type="submit" class="roll-button" data-value="{{option.value}}">{{option.text}}</button>
        {{/each}}
      </div>
    </div>
  </div>
</form>