codecombat/app/templates/game-menu/options-view.jade

#player-avatar-container(title="Click to change your avatar").pull-right
  if !me.get('photoURL')
    .editable-icon.glyphicon.glyphicon-pencil
  img.profile-photo(src=me.getPhotoURL(230))
  .form-group
    input#player-name.profile-caption(name="playerName", type="text", value=me.get('name') || 'Anoner')

.form
  h3(data-i18n="options.general_options") General Options

  .form-group.slider-group
    label(for="option-volume")
      span(data-i18n="options.volume") Volume
      span.spr :
      span#option-volume-value= (me.get('volume') * 100).toFixed(0) + '%'
    #option-volume.slider

  .form-group.checkbox
    label(for="option-music")
      input#option-music(name="option-music", type="checkbox", checked=music)
      span(data-i18n="options.music") Music
    span.help-block(data-i18n="options.music_description") Turn background music on/off.

  .form-group.select-group
    label.control-label(for="option-autorun-delay", data-i18n="options.autorun_label") Autorun
    select#option-autorun-delay(name="autorunDelay")
      option(value=1000, selected=(autorunDelay === 1000), data-i18n="common.delay_1_sec") 1 second
      option(value=3000, selected=(autorunDelay === 3000), data-i18n="common.delay_3_sec") 3 seconds
      option(value=5000, selected=(autorunDelay === 5000), data-i18n="common.delay_5_sec") 5 seconds
      option(value=90019001, selected=(autorunDelay === 90019001), data-i18n="common.manual") Manual
    span.help-block(data-i18n="options.autorun_description") Control automatic code execution.

  h3(data-i18n="options.editor_config_title") Editor Configuration

  .form-group.select-group
    label.control-label(for="option-key-bindings", data-i18n="options.editor_config_keybindings_label") Key Bindings
    select#option-key-bindings(name="keyBindings")
      option(value="default", selected=(aceConfig.keyBindings === "default"), data-i18n="options.editor_config_keybindings_default") Default (Ace)
      option(value="vim", selected=(aceConfig.keyBindings === "vim")) Vim
      option(value="emacs", selected=(aceConfig.keyBindings === "emacs")) Emacs
    span.help-block(data-i18n="options.editor_config_keybindings_description") Adds additional shortcuts known from the common editors.

  .form-group.checkbox
    label(for="option-live-completion")
      input#option-live-completion(name="liveCompletion", type="checkbox", checked=aceConfig.liveCompletion)
      span(data-i18n="options.editor_config_livecompletion_label") Live Autocompletion
    span.help-block(data-i18n="options.editor_config_livecompletion_description") Displays autocomplete suggestions while typing.

  .form-group.checkbox
    label(for="option-invisibles")
      input#option-invisibles(name="invisibles", type="checkbox", checked=aceConfig.invisibles)
      span(data-i18n="options.editor_config_invisibles_label") Show Invisibles
    span.help-block(data-i18n="options.editor_config_invisibles_description") Displays invisibles such as spaces or tabs.

  .form-group.checkbox
    label(for="option-indent-guides")
      input#option-indent-guides(name="indentGuides", type="checkbox", checked=aceConfig.indentGuides)
      span(data-i18n="options.editor_config_indentguides_label") Show Indent Guides
    span.help-block(data-i18n="options.editor_config_indentguides_description") Displays vertical lines to see indentation better.

  .form-group.checkbox
    label(for="option-behaviors")
      input#option-behaviors(name="behaviors", type="checkbox", checked=aceConfig.behaviors)
      span(data-i18n="options.editor_config_behaviors_label") Smart Behaviors
    span.help-block(data-i18n="options.editor_config_behaviors_description") Autocompletes brackets, braces, and quotes.