<section id="midi-config-rules" 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 optionalRulesEnabled">
            <label>{{localize "midi-qol.OptionalRules.Name"}}</label>
            <input type="checkbox" name="optionalRulesEnabled" data-dtype="Boolean" {{checked
            configSettings.optionalRulesEnabled}} />
        </div>
        <div>
            {{#unless configSettings.optionalRulesEnabled}}
                {{localize "midi-qol.OptionalRules.Hint"}}
            {{/unless}}
            {{#if configSettings.optionalRulesEnabled}}
                <div class="form-group">
                    <label>{{localize "midi-qol.CheckFlanking.Name"}}</label>
                    <select name="optionalRules.checkFlanking" data-dtype="String">
                        {{selectOptions checkFlankingOptions selected=configSettings.optionalRules.checkFlanking}}
                    </select>
                    <div class="notes midi-qol-faint">{{{localize "midi-qol.CheckFlanking.Hint"}}}</div>
                </div>
                <div class="midi-qol-box">
                    <div class="form-group">
                        <label>{{localize "midi-qol.InvisAdvantage.Name"}}</label>
                        <select name="optionalRules.invisAdvantage" data-dtype="String">
                            {{selectOptions InvisAdvantageOptions selected=configSettings.optionalRules.invisAdvantage}}
                        </select>
                        <ul>
                            <li class="notes midi-qol-faint">{{{localize "midi-qol.InvisAdvantage.Hint"}}}</li>
                            <li class="notes midi-qol-faint">{{{localize "midi-qol.CantSeeAdvantage.Hint"}}}</li>
                        </ul>
                    </div>
                    <div class="form-group">
                        <label>{{localize "midi-qol.HiddenAdvantage.Name"}}</label>
                        <select name="optionalRules.hiddenAdvantage" data-dtype="String">
                            {{selectOptions HiddenAdvantageOptions selected=configSettings.optionalRules.hiddenAdvantage}}
                        </select>
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.HiddenAdvantage.Hint"}}}</div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "midi-qol.InvisVision.Name"}}</label>
                        <input type="checkbox" name="optionalRules.invisVision" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.invisVision}} />
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.InvisVision.Hint"}}}</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "midi-qol.RemoveHiddenInvis.Name"}}</label>
                    <input type="checkbox" name="optionalRules.removeHiddenInvis" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.removeHiddenInvis}} />
                </div>
                <div class="form-group">
                    <label>{{localize "midi-qol.NearbyFoe.Name"}}</label>
                    <input type="number" step="0.1" name="optionalRules.nearbyFoe"
                        value="{{configSettings.optionalRules.nearbyFoe}}" />
                </div>
                <div class="midi-qol-box">
                    <div class="form-group">
                        <label style>{{localize "midi-qol.MaxDRValue.Name"}}</label>
                        <input type="checkbox" name="optionalRules.maxDRValue" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.maxDRValue}} />
                    </div>
                    <div class="form-group">
                        <label>{{localize "midi-qol.DRAllPerDamageDetail.Name"}}</label>
                        <input type="checkbox" name="optionalRules.DRAllPerDamageDetail" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.DRAllPerDamageDetail}} />
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.DRAllPerDamageDetail.Hint"}}}</div>
                    </div>
                </div>
                <div class="form-group">
                    <label style>{{localize "midi-qol.CriticalSaves.Name"}}</label>
                    <input type="checkbox" name="optionalRules.criticalSaves" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.criticalSaves}} />
                </div>
                <div class="midi-qol-box">
                    <div class="form-group">
                        <label>{{localize "midi-qol.OptionalCritRule.Name"}}</label>
                        <input type="number" name="optionalRules.optionalCritRule"
                            value="{{configSettings.optionalRules.optionalCritRule}}" />
                    </div>
                    <div class="notes midi-qol-faint">{{{localize "midi-qol.OptionalCritRule.Hint"}}}</div>
                    <div class="form-group">
                        <label>{{localize "midi-qol.CriticalNat20.Name"}}</label>
                        <input type="checkbox" name="optionalRules.criticalNat20" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.criticalNat20}} />
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.CriticalNat20.Hint"}}}</div>
                    </div>
                </div>
                <div class="form-group">
                    <label>{{localize "midi-qol.NearbyAllyRanged.Name"}}</label>
                    <input type="number" step="0.1" name="optionalRules.nearbyAllyRanged"
                        value="{{configSettings.optionalRules.nearbyAllyRanged}}" />
                    <div class="notes midi-qol-faint">{{{localize "midi-qol.NearbyAllyRanged.Hint"}}}</div>
                </div>
                <div class="midi-qol-box">
                    <div class="form-group">
                        <label>{{localize "midi-qol.ActiveDefence.Name"}}</label>
                        <input type="checkbox" name="optionalRules.activeDefence" data-dtype="Boolean" {{checked
                        configSettings.optionalRules.activeDefence}} />
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.ActiveDefence.Hint"}}}</div>
                    </div>
                    <div class = "form-group">
                      <label> {{ localize "midi-qol.ActiveDefenceDC.Name"}} </label>
                      <input type="checkbox" name="optionalRules.activeDefenceDC" data-dtype="Boolean" {{checked configSettings.optionalRules.activeDefenceDC}} />
                      <div class="notes midi-qol-faint">{{{localize "midi-qol.ActiveDefenceDC.Hint"}}}</div>
                    </div>
                    <div class="form-group">
                        <label>{{localize "midi-qol.ActiveDefenceShow.Name"}}</label>
                        <select name="optionalRules.activeDefenceShow" data-dtype="String">
                            {{selectOptions rollModes selected=configSettings.optionalRules.activeDefenceShow localize=true}}
                        </select>
                        <div class="notes midi-qol-faint">{{{localize "midi-qol.ActiveDefenceShow.Hint"}}}</div>
                    </div>
                </div>
                <div class="midi-qol-box">
                    <div class="form-group">
                        <label>{{localize "midi-qol.ChallengeModeArmor.Name"}}</label>
                        <select class="midi-qol-blind-select" name="optionalRules.challengeModeArmor">
                            {{selectOptions ChallengeModeArmorOptions selected=configSettings.optionalRules.challengeModeArmor}}
                        </select>
                        <ul>
                            <li class="notes midi-qol-faint">{{{localize "midi-qol.ChallengeModeArmor.Hint"}}}</li>
                            <li class="notes midi-qol-faint">{{{localize "midi-qol.ChallengeModeArmorScale.Hint"}}}</li>
                            <li class="notes midi-qol-faint">{{{localize "midi-qol.ChallengeModeArmorScaleNoAR.Hint"}}}</li>
                        </ul>
                    </div>
                </div>
            {{/if}}
        </div>
        <div class="midi-qol-box">
            <div class="form-group">
                <label>{{localize "midi-qol.OptionalRuleVitality.Name"}}</label>
                <input type="text" name="optionalRules.vitalityResource"
                    value="{{configSettings.optionalRules.vitalityResource}}" />
                <div class="notes midi-qol-faint">{{{localize "midi-qol.OptionalRuleVitality.Hint"}}}</div>
            </div>
        </div>
    </div>
    <div class="midi-qol-box">
        <div class="form-group">
            <label>{{localize "midi-qol.ddbGL.Name"}}</label>
            <input type="checkbox" name="optionalRules.enableddbGL" data-dtype="Boolean" {{checked
            configSettings.optionalRules.enableddbGL}} />
            <div class="notes midi-qol-faint">{{{localize "midi-qol.ddbGL.Hint"}}}</div>
        </div>
    </div>
</section>