Panel
  OptionCheckBox
    id: classicView
    !text: tr('Classic view')

  OptionCheckBox
    id: showPing
    !text: tr('Show connection ping')
    !tooltip: tr('Display connection speed to the server (milliseconds)')

  OptionCheckBox
    id: displayNames
    !text: tr('Display creature names')

  OptionCheckBox
    id: displayHealth
    !text: tr('Display creature health bars')

  OptionCheckBox
    id: displayHealthOnTop
    !text: tr('Display creature health bars above texts')

  OptionCheckBox
    id: hidePlayerBars
    !text: tr('Show player health bar')

  OptionCheckBox
    id: displayMana
    !text: tr('Show player mana bar')

  OptionCheckBox
    id: topHealtManaBar
    !text: tr('Show player top health and mana bar')

  OptionCheckBox
    id: showHealthManaCircle
    !text: tr('Show health and mana circle')

  OptionCheckBox
    id: highlightThingsUnderCursor
    !text: tr('Highlight things under cursor')

  Label
    margin-top: 12
    width: 90
    anchors.left: parent.left
    anchors.top: prev.bottom
    id: leftPanelsLabel
    !text: tr("Left panels")

  Label
    width: 90
    anchors.left: prev.right
    anchors.top: prev.top
    id: rightPanelsLabel
    !text: tr("Right panels")

  Label
    width: 130
    anchors.left: prev.right
    anchors.top: prev.top
    id: backpackPanelLabel
    !text: tr("Container's panel")
    !tooltip: tr("Open new containers in selected panel")

  ComboBox
    id: leftPanels
    anchors.left: leftPanelsLabel.left
    anchors.right: leftPanelsLabel.right
    anchors.top: leftPanelsLabel.bottom
    margin-top: 3
    margin-right: 20
    @onOptionChange: modules.client_options.setOption(self:getId(), self.currentIndex)
    @onSetup: |
      self:addOption("0")
      self:addOption("1")
      self:addOption("2")
      self:addOption("3")
      self:addOption("4")

  ComboBox
    id: rightPanels
    anchors.left: rightPanelsLabel.left
    anchors.right: rightPanelsLabel.right
    anchors.top: rightPanelsLabel.bottom
    margin-top: 3
    margin-right: 20
    @onOptionChange: modules.client_options.setOption(self:getId(), self.currentIndex)
    @onSetup: |
      self:addOption("1")
      self:addOption("2")
      self:addOption("3")
      self:addOption("4")

  ComboBox
    id: containerPanel
    anchors.left: backpackPanelLabel.left
    anchors.right: backpackPanelLabel.right
    anchors.top: backpackPanelLabel.bottom
    margin-top: 3
    @onOptionChange: modules.client_options.setOption(self:getId(), self.currentIndex)
    @onSetup: |
      self:addOption("1st left panel")
      self:addOption("2nd left panel")
      self:addOption("3rd left panel")
      self:addOption("4th left panel")
      self:addOption("1st right panel")
      self:addOption("2nd right panel")
      self:addOption("3rd right panel")
      self:addOption("4th right panel")

  Label
    margin-top: 12
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    id: crosshairLabel
    !text: tr("Crosshair")
    
  ComboBox
    id: crosshair
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 3
    margin-right: 2
    margin-left: 2
    @onOptionChange: modules.client_options.setOption(self:getId(), self.currentIndex)
    @onSetup: |
      self:addOption("None")
      self:addOption("Default")
      self:addOption("Full")

  Label
    id: floorFadingLabel
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 6
    @onSetup: |
      local value = modules.client_options.getOption('floorFading')
      self:setText(tr('Floor fading: %s ms', value))

  OptionScrollbar
    id: floorFading
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 3
    minimum: 0
    maximum: 2000

  Label
    id: floorFadingLabel2
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 6
    !text: (tr('Floor fading doesn\'t work with enabled light'))