<section id="midi-config-misc" 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.SavesBeforeDamage.Name"}}}</label>
      <input type="checkbox" name="savesBeforeDamage" data-dtype="Boolean" {{checked configSettings.savesBeforeDamage}} />
      <div class="notes midi-qol-faint">{{{localize "midi-qol.SavesBeforeDamage.Hint"}}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
    <div class="form-group">
      <button type="button" name="export-config" id="midi-qol-export-config">
          <i class="fas fa-dice-d20"></i> {{localize "midi-qol.ExportConfig"}}
      </button>
    </div>
    <div class="form-group">
      <button type="button" name="import-config" id="midi-qol-import-config">
          <i class="fas fa-dice-d20"></i> {{localize "midi-qol.ImportConfig"}}
      </button>
      </div>
    </div>
    <div class="form-group activityNamePrefix">
        <label>{{localize "midi-qol.ActivityNamePrefix.Name"}}</label>
        <input id="activityNamePrefix" type="checkbox" name="activityNamePrefix" data-dtype="Boolean" {{checked
        configSettings.activityNamePrefix}} />
        <div class="notes midi-qol-faint">{{{localize "midi-qol.ActivityNamePrefix.Hint"}}}</div>
    </div>
    <div class="form-group conditionEditorEnabled">
        <label>{{localize "midi-qol.ConditionEditorEnabled.Name"}}</label>
        <input id="conditionEditorEnabled" type="checkbox" name="conditionEditorEnabled" data-dtype="Boolean" {{checked
        configSettings.conditionEditorEnabled}} />
        <div class="notes midi-qol-faint">{{{localize "midi-qol.ConditionEditorEnabled.Hint"}}}</div>
    </div>
    <div class="form-group midiPropertiesTab">
        <label>{{localize "midi-qol.MidiPropertiesTab.Name"}}</label>
        <select name="midiPropertiesTabRole" data-dtype="String">
            {{selectOptions midiPropertiesTabOptions selected=configSettings.midiPropertiesTabRole localize=true}}
        </select>
        <div class="notes midi-qol-faint">{{{localize "midi-qol.MidiPropertiesTab.Hint"}}}</div>
    </div>
    <div class="form-group allowActorUseMacro">
        <label>{{localize "midi-qol.AllowActorUseMacro.Name"}}</label>
        <input id="allowActorUseMacro" type="checkbox" name="allowActorUseMacro" data-dtype="Boolean" {{checked
        configSettings.allowActorUseMacro}} />
    </div>
    <div class="form-group allowUseMacro">
        <label>{{localize "midi-qol.AllowUseMacro.Name"}}</label>
        <input id="allowUseMacro" type="checkbox" name="allowUseMacro" data-dtype="Boolean" {{checked
        configSettings.allowUseMacro}} />
        <div class="notes midi-qol-faint">{{{localize "midi-qol.AllowUseMacro.Hint"}}}</div>
    </div>
  </div>
  <div class="midi-qol-box">
      <div class="form-group">
          <label>{{localize "midi-qol.ShowItemDetails.Name"}}</label>
          <div>
              <select name="showItemDetails" data-dtype="String">
                  {{selectOptions showItemDetailsOptions selected=configSettings.showItemDetails localize=true}}
              </select>
              <label>{{localize "midi-qol.DisplayItems"}}</label>
              <a class="itemTypeListEdit" style="flex-shrink:3" data-action="edit"
                  title="{{localize 'midi-qol.ItemList'}}">
                  <i class=" fas fa-pen-to-square"></i>
              </a>
          </div>
          <div class="notes midi-qol-faint">{{{localize "midi-qol.ShowItemDetails.Hint"}}}</div>
      </div>
      <div class="form-group">
        <label> {{localize "midi-qol.DisplayItemProperties.Name"}} </label>
          <input type="checkbox" name="displayProperties" data-dtype="Boolean" {{checked
          configSettings.displayProperties}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.DisplayItemProperties.Hint"}}}</div>
      </div>

      <div class="form-group">
          <label>{{localize "midi-qol.MergeCardCondensed.Name"}}</label>
          <input type="checkbox" name="mergeCardCondensed" data-dtype="Boolean" {{checked
          configSettings.mergeCardCondensed}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.MergeCardCondensed.Hint"}}}</div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.AddSheetButtons.Name"}}</label>
          <input type="checkbox" name="addSheetButtons" data-dtype="Boolean" {{checked
          configSettings.addSheetButtons}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.AddSheetButtons.Hint"}}}</div>
      </div>
      <!--
      <div class="form-group">
          <label>{{localize "midi-qol.MergeCardMultiDamage.Name"}}multi damage</label>
          <input type="checkbox" name="mergeCardMultiDamage" data-dtype="Boolean" {{checked
          configSettings.mergeCardMultiDamage}} />
      </div>
      -->
      <div class="form-group">
          <label>{{localize "midi-qol.MergeCardMulti.Name"}}</label>
          <input type="checkbox" name="mergeCardMulti" data-dtype="Boolean" {{checked configSettings.mergeCardMulti}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.MergeCardMulti.Hint"}}}</div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.CollapsibleTargets.Name"}}</label>
          <input type="checkbox" name="collapsibleTargets" data-dtype="Boolean" {{checked
          configSettings.collapsibleTargets}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.CollapsibleTargets.Hint"}}}</div>
      </div>
      <div class="midi-qol-box">
          <div class="form-group">
              <label>{{localize "midi-qol.ConfirmAttackDamage.Name"}}</label>
              <select name="confirmAttackDamage" data-dtype="String">
                  {{selectOptions ConfirmAttackDamageOptions selected=configSettings.confirmAttackDamage localize=true}}
              </select>
              <div class="notes midi-qol-faint">{{{localize "midi-qol.ConfirmAttackDamage.Hint"}}}</div>
          </div>
          <div class="form-group">
              <label>{{localize "midi-qol.AutoCompleteWorkflow.Name"}}</label>
              <input type="checkbox" name="autoCompleteWorkflow" data-dtype="Boolean" {{checked
                  configSettings.autoCompleteWorkflow}} />
              <div class="notes midi-qol-faint">{{{localize "midi-qol.AutoCompleteWorkflow.Hint"}}}</div>
          </div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.ColoredBorders.Name"}}</label>
          <select name="coloredBorders" data-dtype="String">
              {{selectOptions coloredBordersOptions selected=configSettings.coloredBorders localize=true}}
          </select>
          <div class="notes midi-qol-faint">{{{localize "midi-qol.ColoredBorders.Hint"}}}</div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.RollAlternate.Name"}}</label>
          <select name="rollAlternate" data-dtype="String">
              {{selectOptions rollAlternateOptions selected=configSettings.rollAlternate localize=true}}
          </select>
          <div class="notes midi-qol-faint">{{{localize "midi-qol.RollAlternate.Hint"}}}</div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.ShowFastForward.Name"}}</label>
          <input type="checkbox" name="showFastForward" data-dtype="Boolean" {{checked
          configSettings.showFastForward}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.ShowFastForward.Hint"}}}</div>
      </div>
  </div>
  <div class="midi-qol-box">
      <div class="form-group">
          <label>{{localize "midi-qol.UseTokenNames.Name"}}</label>
          <input type="checkbox" name="useTokenNames" data-dtype="Boolean" {{checked configSettings.useTokenNames}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.UseTokenNames.Hint"}}}</div>
      </div>
      <div class="form-group">
          <label>{{localize "midi-qol.UsePlayerPortrait.Name"}}</label>
          <input type="checkbox" name="usePlayerPortrait" data-dtype="Boolean" {{checked
          configSettings.usePlayerPortrait}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.UsePlayerPortrait.Hint"}}}</div>
      </div>
  </div>
  <div class=" midi-qol-box">
      <div class="form-group customSounds">
          <label>{{localize "midi-qol.UseCustomSounds.Name"}}</label>
          <input id="useCustomSounds" type="checkbox" name="useCustomSounds" data-dtype="Boolean" {{checked
          configSettings.useCustomSounds}} />
          <div class="notes midi-qol-faint">{{{localize "midi-qol.UseCustomSounds.Hint"}}}</div>
      </div>
  </div>
</section>
