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

.form

  h3(data-i18n="options.general_options") General Options
  
  .form-group.slider-group#volume-group
    span.glyphicon.glyphicon-volume-down
    #option-volume.slider.spr.spl
    span.glyphicon.glyphicon-volume-up

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

  img.hr(src="/images/pages/play/modal/hr.png", draggable="false")

  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.form-control(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.custom-checkbox
        .glyphicon.glyphicon-ok
      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.custom-checkbox
        .glyphicon.glyphicon-ok
      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.custom-checkbox
        .glyphicon.glyphicon-ok
      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.custom-checkbox
        .glyphicon.glyphicon-ok
      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.