<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.chatMessagesMenu.hint"}}</p>

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

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

</div>
