<section id="midi-config-mechanics" class="tab midi-scrollable-list{{#if tab.active}} active{{/if}}"
  data-group="{{tab.group}}" data-tab="{{tab.id}}">
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.AddWounded.Name"}}</label>
      <div class="flexrow 5">
        <input type="number" style="width:40px;" name="addWounded" value="{{configSettings.addWounded}}" />
        <select style="margin: 0 5px" name="midiWoundedCondition" data-dtype="String">
          {{selectOptions StatusEffectOptions selected=configSettings.midiWoundedCondition localize=true}}
        </select>
        <select name="addWoundedStyle" data-dtype="String">
          {{selectOptions AddDeadOptions selected=configSettings.addWoundedStyle localize=true}}
        </select>
      </div>
      <div class="notes midi-qol-faint">{{localize "midi-qol.AddWounded.Hint"}}</div>
    </div>

    <div id="midi-condition-group" class="from-group">
      <div></div>
      <label style="text-align: center">{{localize "midi-qol.AddDead.Hint1"}}</label>
      <label style="text-align: center">{{localize "midi-qol.AddDead.Hint2"}}</label>
      <div></div>
      <label>{{localize "midi-qol.AddDead.Name"}}</label>
      <select name="midiUnconsciousCondition" data-dtype="String">
        {{selectOptions StatusEffectOptions selected=configSettings.midiUnconsciousCondition localize=true}}
      </select>
      <select name="midiDeadCondition" data-dtype="String">
        {{selectOptions StatusEffectOptions selected=configSettings.midiDeadCondition localize=true}}
      </select>
      <select name="addDead" data-dtype="String">
        {{selectOptions AddDeadOptions selected=configSettings.addDead localize=true}}
      </select>
      <label>{{localize "midi-qol.markDefeated"}}</label>
      <input type="checkbox" name="markPlayerDefeated" data-dtype="Boolean" {{checked
        configSettings.markPlayerDefeated}} />
      <input type="checkbox" name="markNonPlayerDefeated" data-dtype="Boolean" {{checked
        configSettings.markNonPlayerDefeated}} />
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.RollChecksBlind.Name"}}</label>
      <multi-select class="midi-qol-blind-select" name="rollChecksBlind">
        {{selectOptions RollChecksBlindOptions selected=configSettings.rollChecksBlind localize=true}}
        {{#each rollChecksBlind}}
        <option value "{{id}}" {{selected id ../configSettings.rollChecksBlind.id}}>{{name}}</option>
        {{/each}}
      </multi-select>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.RollSavesBlind.Name"}}</label>
      <multi-select class="midi-qol-blind-select" name="rollSavesBlind">
        {{selectOptions RollSavesBlindOptions selected=configSettings.rollSavesBlind localize=true}}
        {{#each rollSavesBlind}}
        <option value "{{id}}" {{selected id ../configSettings.rollSavesBlind.id}}>{{name}}</option>
        {{/each}}
      </multi-select>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.RollSkillsBlind.Name"}}</label>
      <multi-select class="midi-qol-blind-select" name="rollSkillsBlind">
        {{selectOptions RollSkillsBlindOptions selected=configSettings.rollSkillsBlind localize=true}}
        {{#each rollSkillsBlind}}
        <option value "{{id}}" {{selected id ../configSettings.rollSkillsBlind.id}}>{{name}}</option>
        {{/each}}
      </multi-select>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.ActionSpecialDurationImmediate.Name"}}</label>
      <input type="checkbox" name="optionalRules.actionSpecialDurationImmediate" data-dtype="Boolean" {{checked
        configSettings.optionalRules.actionSpecialDurationImmediate}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.ActionSpecialDurationImmediate.Hint"}}</div>
    </div>

    <div class="form-group">
      <label>{{localize "midi-qol.WaitForDamageApplication.Name"}}</label>
      <input type="checkbox" name="waitForDamageApplication" data-dtype="Boolean" {{checked
        configSettings.waitForDamageApplication}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.WaitForDamageApplication.Hint"}}</div>
    </div>

    <div class="form-group">
      <label>{{localize "midi-qol.Incapacitated.Name"}}</label>
      <select name="optionalRules.incapacitated" data-dtype="String">
        {{selectOptions IncapacitatedOptions selected=configSettings.optionalRules.incapacitated localize=true}}
      </select>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.CheckRange.Name"}}</label>
      <select name="optionalRules.checkRange" data-dtype="String">
        {{selectOptions CheckRangeOptions selected=configSettings.optionalRules.checkRange localize=true}}
      </select>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.CheckTwoHanded.Name"}}</label>
      <input type="checkbox" name="checkTwoHanded" {{checked configSettings.checkTwoHanded}} />
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.DistanceMeasurement.Name"}}</label>
      <select name="optionalRules.distanceMeasurement" data-dtype="String">
        {{selectOptions distanceMeasurementOptions selected=configSettings.optionalRules.distanceMeasurement localize=true}}
      </select>
      <div class="notes midi-qol-faint">{{localize "midi-qol.DistanceMeasurement.Hint"}}</div>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.GriddedGridless.Name"}}</label>
      <input type="checkbox" name="griddedGridless" data-dtype="Boolean" {{checked configSettings.griddedGridless}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.GriddedGridless.Hint"}}</div>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.GridlessFudge.Name"}}</label>
      <input type="number" step="0.1" name="gridlessFudge" value="{{configSettings.gridlessFudge}}" />
      <div class="notes midi-qol-faint">{{localize "midi-qol.GridlessFudge.Hint"}}</div>
    </div>
    <div class="form-group">
      <label>{{localize "midi-qol.DistanceIncludesHeight.Name"}}</label>
      <input type="checkbox" name="optionalRules.distanceIncludesHeight" data-dtype="Boolean" {{checked
        configSettings.optionalRules.distanceIncludesHeight}} />
    </div>
    <div class="form-group">
      <label>{{{localize "midi-qol.ConstrainTemplatePlacement.Name"}}}</label>
      <input type="checkbox" name="constrainTemplatePlacement" data-dtype="Boolean" {{checked configSettings.constrainTemplatePlacement}} />
      <div class="notes midi-qol-faint">{{{localize "midi-qol.ConstrainTemplatePlacement.Hint"}}}</div>
    </div>
    <div class="form-group">
      <label>{{{localize "midi-qol.TemplateSnapping.Name"}}}</label>
      <select name="templateSnapping" data-dtype="String">
        {{selectOptions templateSnappingOptions selected=configSettings.templateSnapping}}
      </select>
      <div class="notes midi-qol-faint">{{{localize "midi-qol.TemplateSnapping.Hint"}}}</div>
    </div>
  </div>

  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.SkillAbilityCheckAdvantage.Name"}}</label>
      <input type="checkbox" name="skillAbilityCheckAdvantage" data-dtype="Boolean" {{checked
        configSettings.skillAbilityCheckAdvantage}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.SkillAbilityCheckAdvantage.Hint"}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.DisplayBonusRolls.Name"}}</label>
      <input type="checkbox" name="optionalRules.displayBonusRolls" data-dtype="Boolean" {{checked
        configSettings.optionalRules.displayBonusRolls}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.DisplayBonusRolls.Hint"}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.AutoRerollInitiative.Name"}}</label>
      <input type="checkbox" name="optionalRules.autoRerollInitiative" data-dtype="Boolean" {{checked
        configSettings.optionalRules.autoRerollInitiative}} />
      <div class="notes midi-qol-faint">{{localize "midi-qol.AutoRerollInitiative.Hint"}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.UndoWorkflow.Name"}}</label>
      <input type="checkbox" name="undoWorkflow" data-dtype="Boolean" {{checked configSettings.undoWorkflow}} />
    </div>
    <div class="notes midi-qol-faint">{{localize "midi-qol.UndoWorkflow.Hint"}}</div>
    <div class="form-group">
      <label>{{localize "midi-qol.UndoChatColor.Name"}}</label>
      <select name="undoChatColor" data-dtype="String">
        {{selectOptions ColorOptions selected=configSettings.undoChatColor localize=true}}
      </select>
      <div class="notes midi-qol-faint">{{localize "midi-qol.UndoChatColor.Hint"}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <label>{{localize "midi-qol.ActivationAutomation.Name"}}</label>
      <select name="activationAutomation" data-dtype="String">
        {{selectOptions ActivationAutomationOptions selected=configSettings.activationAutomation localize=true}}
      </select>
      <div class="notes midi-qol-faint">{{localize "midi-qol.ActivationAutomation.Hint"}}</div>
    </div>
</section>