<div class="form-content">
  <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">
    <p class="hint">{{{localize "CRLNGN_UI.settings.customFontsMenu.description"}}}</p>
  </div>

  <div class="form-group">
    <label for="uiFontBody">{{fields.uiFontBody.label}}</label>
    <div class="dropdown-wrapper">
      <input type="text" name="uiFontBody" value="{{uiFontBody}}" 
        autocomplete="off" 
        onfocus="this.select()" />
      <div class="dropdown-options">
        {{#each fontList}}
          <div class="dropdown-option" 
            style="font-family:{{this}}" 
            data-value="{{this}}">
            {{this}}
          </div>
        {{/each}}
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="uiFontTitles">{{fields.uiFontTitles.label}}</label>
    <div class="dropdown-wrapper">
      <input type="text" name="uiFontTitles" value="{{uiFontTitles}}" 
        autocomplete="off" 
        onfocus="this.select()" />
      <div class="dropdown-options">
        {{#each fontList}}
          <div class="dropdown-option" 
            style="font-family:{{this}}" 
            data-value="{{this}}">
            {{this}}
          </div>
        {{/each}}
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="journalFontBody">{{fields.journalFontBody.label}}</label>
    <div class="dropdown-wrapper">
      <input type="text" name="journalFontBody" value="{{journalFontBody}}" 
        autocomplete="off" 
        onfocus="this.select()" />
      <div class="dropdown-options">
        {{#each fontList}}
          <div class="dropdown-option" 
            style="font-family:{{this}}" 
            data-value="{{this}}">
            {{this}}
          </div>
        {{/each}}
      </div>
    </div>
  </div>

  <div class="form-group">
    <label for="journalFontTitles">{{fields.journalFontTitles.label}}</label>
    <div class="dropdown-wrapper">
      <input type="text" name="journalFontTitles" value="{{journalFontTitles}}" 
        autocomplete="off" 
        onfocus="this.select()" />
      <div class="dropdown-options">
        {{#each fontList}}
          <div class="dropdown-option" 
            style="font-family:{{this}}" 
            data-value="{{this}}">
            {{this}}
          </div>
        {{/each}}
      </div>
    </div>
  </div>

  <p class="hint">{{{localize "CRLNGN_UI.settings.customFontsMenu.postDescription"}}}</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>