<form id="bonus-roll-form">

  <div class="flexcol-coc7">

    {{#if cardTypes}}
      <div class="flexrow-coc7 roll-card-type-selector">
        <label>{{localize 'CoC7.CardType'}}</label>
        <select name="cardType">
          {{selectOptions cardTypes selected=options.cardType localize=true}}
        </select>
      </div>
    {{/if}}

    {{#if options.askValue}}
      <div class="flexrow-coc7 roll-threshold">
        <label>{{localize 'CoC7.RollThreshold'}}</label>
        <input type="number" name="threshold" value="{{options.threshold}}" />
      </div>
    {{/if}}

    {{#unless hideDifficulty}}
      <div class="flexrow-coc7 roll-difficulty-selector">
        <label>{{localize 'CoC7.RollDifficulty'}}</label>
        <select name="difficulty">
          {{#if options.difficulty}}
            <option class="difficulty-unknown" value="{{difficulty.unknown}}" {{#if options.difficultyLevel.unknown}}selected{{/if}}>{{localize 'CoC7.RollDifficultyUnknown'}}</option>
            <option class="difficulty-regular" value="{{difficulty.regular}}" {{#if options.difficultyLevel.regular}}selected{{/if}}>{{localize 'CoC7.RollDifficultyRegular'}}</option>
            <option class="difficulty-hard" value="{{difficulty.hard}}" {{#if options.difficultyLevel.hard}}selected{{/if}}>{{localize 'CoC7.RollDifficultyHard'}}</option>
            <option class="difficulty-extreme" value="{{difficulty.extreme}}" {{#if options.difficultyLevel.extreme}}selected{{/if}}>{{localize 'CoC7.RollDifficultyExtreme'}}</option>
          {{else}}
            <option class="difficulty-unknown" value="{{difficulty.unknown}}" {{#if unknownDifficultyDefault}}selected{{/if}}>{{localize 'CoC7.RollDifficultyUnknown'}}</option>
            <option class="difficulty-regular" value="{{difficulty.regular}}" {{#unless unknownDifficultyDefault}}selected{{/unless}}>{{localize 'CoC7.RollDifficultyRegular'}}</option>
            <option class="difficulty-hard" value="{{difficulty.hard}}">{{localize 'CoC7.RollDifficultyHard'}}</option>
            <option class="difficulty-extreme" value="{{difficulty.extreme}}">{{localize 'CoC7.RollDifficultyExtreme'}}</option>
          {{/if}}
        </select>
      </div>
    {{/unless}}

    {{#if allowFlatDiceModifier}}
      <div class="flexrow-coc7">
        <label>{{localize 'CoC7.FlatDiceModifier'}}</label>
        <input type="number" name="flatDiceModifier" value="{{#if options.flatDiceModifier}}{{options.flatDiceModifier}}{{else}}0{{/if}}" />
      </div>
    {{/if}}

    {{#if allowFlatThresholdModifier}}
      <div class="flexrow-coc7">
        <label>{{localize 'CoC7.FlatModifier'}}</label>
        <input type="number" name="flatThresholdModifier" value="{{#if options.flatThresholdModifier}}{{options.flatThresholdModifier}}{{else}}0{{/if}}" />
      </div>
    {{/if}}

    <div class="flexrow-coc7 bonus-penalty-selector" style="padding: 4px 0;">
      <div style="flex: 1;"><label>{{localize 'CoC7.BonusDice'}}</label></div>
      <div style="flex: 1;display: flex;flex-direction: column;">
        <div class="flexcol-coc7 bonus-penalty-labels">
          <div class="flexrow-coc7">
            <span class="double-penalty" style="flex: 1.6; text-align: left; white-space: nowrap;"><i class="fa-solid fa-dice-d10"></i><i class="fa-solid fa-dice-d10"></i></span>
            <span class="penalty" style="flex: 2.5; text-align: center;"><i class="fa-solid fa-dice-d10"></i></span>
            <span class="normal-roll" style="flex: 2; text-align: center;"><i class="fa-solid fa-dice-d10"></i></span>
            <span class="bonus" style="flex: 2.5; text-align: center;"><i class="fa-solid fa-dice-d10"></i></span>
            <span class="double-bonus" style="flex: 1.6; text-align: right; white-space: nowrap;"><i class="fa-solid fa-dice-d10"></i><i class="fa-solid fa-dice-d10"></i></span>
          </div>
          <div class="flexrow-coc7">
            <span class="double-penalty" style="flex: 1; text-align: left;">-2</span>
            <span class="" style="flex: 1; text-align: center;"></span>
            <span class="penalty" style="flex: 1; text-align: center;">-1</span>
            <span class="" style="flex: 1; text-align: center;"></span>
            <span class="normal-roll" style="flex: 1; text-align: center;">0</span>
            <span class="" style="flex: 1; text-align: center;"></span>
            <span class="bonus" style="flex: 1; text-align: center;">+1</span>
            <span class="" style="flex: 1; text-align: center;"></span>
            <span class="double-bonus" style="flex: 1; text-align: right;">+2</span>
          </div>
        </div>
        <input type="range" name="bonusDice" min="-2" max="2" value="{{#if options.modifier}}{{options.modifier}}{{else}}0{{/if}}" class="slider" id="myslider">
      </div>
    </div>
  </div>
</form>