<div class="form-content">
  <h4><i class="fas fa-user"></i> {{localize "CRLNGN_UI.ui.clientSettingsLabel"}} <span class="toggle-hint">{{localize 'CRLNGN_UI.ui.toggleHints'}}</span></h4>
  <hr/>
  {{!-- <h2>{{localize "CRLNGN_UI.settings.customFontsDialog.label"}}</h2> --}}
  <p class="hint">{{localize "CRLNGN_UI.settings.leftControlsMenu.hint"}}</p>

  <div class="form-group">
    <label for="controlsBottomBuffer">{{fields.controlsBottomBuffer.label}}</label>
    <input type="number" name="controlsBottomBuffer" value="{{controlsBottomBuffer}}" />
    <p class="hint">{{{fields.controlsBottomBuffer.hint}}}</p> 
  </div>
  
  <div class="form-group">
    <label for="controlsIconSize">{{fields.controlsIconSize.label}}</label>
    <select name="controlsIconSize">
      {{#each fields.controlsIconSize.options}}
      <option value="{{@key}}" {{#if (eq @key ../controlsIconSize)}}selected{{/if}}>
        {{this}}
      </option>
      {{/each}}
    </select>
    <p class="hint">{{fields.controlsIconSize.hint}}</p>
  </div>

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

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

    <p class="hint">{{fields.hideFoundryLogo.hint}}</p> 
  </div>

</div>
