<div class="form-content">

  {{#if isGM}}
  <h4><i class="fas fa-globe"></i> {{localize "CRLNGN_UI.ui.worldSettingsLabel"}} <span class="toggle-hint">{{localize 'CRLNGN_UI.ui.toggleHints'}}</span></h4>
  <hr/>

  <div class="form-group">
    <label for="colorTheme">{{fields.colorTheme.label}}</label>
    <div class="dropdown-wrapper">
      {{#each selectedTheme.colorPreview}}
        <span class="selected-theme" style="background-color:{{this}}"></span>
      {{/each}}
      <input type="text" name="colorTheme" value="{{colorTheme}}" class="crlngn-theme-input"
        autocomplete="off" 
        onfocus="this.select()" />
      <div class="dropdown-options">
        {{#each themes}}
          <div class="dropdown-option theme-color-preview" 
            data-value="{{this.className}}"
            >
            {{#each colorPreview}}
            <span class="theme-color" style="background:{{this}}"></span>
            {{/each}}
            <span class="theme-name">{{this.label}}</span>
          </div>
        {{/each}}
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="otherModulesList">{{fields.otherModulesList.label}}</label>
    <input type="checkbox" class="adjustOtherModules" name="adjustOtherModules" {{#if adjustOtherModules}}checked{{/if}} />
    <input type="text" class="otherModulesList" name="otherModulesList" value="{{{otherModulesList}}}" hidden />
    <p class="hint">{{{fields.otherModulesList.hint}}}</p> 
    <ul class="multiple-select other-modules">
      {{#each fields.otherModulesList.options}}
      <li>
        <label><input type="checkbox" value={{this}} {{#if (normalizedIncludes ../otherModulesList this)}}checked{{/if}} />{{@key}}</label>
      </li>
      {{/each}}
    </ul>
  </div>

  <div class="form-group">
    <label for="customStyles">{{fields.customStyles.label}}</label>
    <div class="code-editor-wrapper">
      <textarea name="customStyles" class="code-editor" 
      rows="8" cols="80" wrap="off" placeholder="Write your code here..." 
      spellcheck="false">{{customStyles}}</textarea>
    </div>
    <p class="hint">{{fields.customStyles.hint}}</p>
  </div>

  <div class="form-group">
    <label for="applyThemeToSheets">{{fields.applyThemeToSheets.label}}</label>
    <input type="checkbox" name="applyThemeToSheets" {{#if applyThemeToSheets}}checked{{/if}} />
    <p class="hint">{{fields.applyThemeToSheets.hint}}</p> 
  </div>
  {{/if}}

  <h4>
      <i class="fas fa-user"></i> {{localize "CRLNGN_UI.ui.clientSettingsLabel"}}
  </h4>
  <hr/>

  <div class="form-group">
      <label for="useHorizontalSheetTabs">{{fields.useHorizontalSheetTabs.label}}</label>
      <input type="checkbox" name="useHorizontalSheetTabs" {{#if useHorizontalSheetTabs}}checked{{/if}} />
      <p class="hint">{{fields.useHorizontalSheetTabs.hint}}</p>
  </div>

</div>