KeybindsTableRow < UITableRow
  focusable: true
  height: 20
  background-color: alpha
  even-background-color: alpha
  odd-background-color: #484848
  text-align: left
  @onFocusChange: for _, child in ipairs(self:getChildren()) do child:setChecked(self:isFocused()) end
  layout: horizontalBox

  $focus:
    background-color: #585858

KeybindsTableColumn < Label
  color: #c0c0c0
  text-align: left
  focusable: false
  text-offset: 2 0
  font: verdana-11px-monochrome

EditableKeybindsTableColumn < Label
  color: #c0c0c0
  text-align: left
  focusable: false
  text-offset: 2 0
  font: verdana-11px-monochrome
  @onCheckChange: self.edit:setVisible(self:isChecked())

  Button
    id: edit
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    size: 13 13
    margin-right: 2
    icon: /images/options/icon-edit
    visible: false

EditableHotkeysTableColumn < Label
  color: #c0c0c0
  text-align: left
  focusable: false
  text-offset: 18 0
  font: verdana-11px-monochrome
  @onCheckChange: self.edit:setVisible(self:isChecked())

  UIItem
    id: item
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    size: 16 16
    virtual: true
    phantom: true

  Button
    id: edit
    anchors.verticalCenter: parent.verticalCenter
    anchors.right: parent.right
    size: 13 13
    margin-right: 2
    icon: /images/options/icon-edit
    visible: false

KeybindsTableHeaderRow < TableHeaderRow
  padding: 0
  height: 18

KeybindsTableHeaderColumn < UITableHeaderColumn
  font: verdana-11px-monochrome
  text-offset: 2 0
  text-align: left
  height: 14
  color: #c0c0c0
  background: #363636

OptionPanel
  
  Panel
    id: presets
    height: 20
    layout:
      type: horizontalBox
      spacing: 5

    ComboBox
      id: list
      width: 330

    SmallButton
      id: add
      width: 30
      !text: tr("Add")

    SmallButton
      id: copy
      width: 35
      !text: tr("Copy")

    SmallButton
      id: rename
      width: 45
      !text: tr("Rename")

    SmallButton
      id: remove
      width: 45
      !text: tr("Remove")
  
  OptionCheckBox
    id: autoSwitchPreset
    !text: tr('Auto-Switch Hotkey Preset')

  OptionContainer
    id: chatMode
    layout:
      type: horizontalBox
      spacing: 150
    
    RadioBox
      id: on
      text-horizontal-auto-resize: true
      !text: tr("Chat Mode On")
    RadioBox
      id: off
      text-horizontal-auto-resize: true
      !text: tr("Chat Mode Off")

  Panel
    id: search
    height: 20
    layout:
      type: horizontalBox
      spacing: 6
    
    Label
      text-offset: 0 3
      font: verdana-11px-monochrome
      !text: tr('Type to search for a hotkey:')
    
    TextEdit
      id: field
      width: 300
    
    UIButton
      id: clear
      image-source: /images/options/button-clear
      image-clip: 0 0 20 20
      width: 20

      $pressed:
        image-clip: 0 20 20 20

  Panel
    id: tablePanel
    height: 298
    image-source: /images/options/1pixel-down-frame
    image-border: 1
    background: #404040

    Table
      id: keybinds
      anchors.fill: parent
      margin: 1
      table-data: keybindsData
      row-style: KeybindsTableRow
      column-style: KeybindsTableColumn
      header-row-style: KeybindsTableHeaderRow
      header-column-style: KeybindsTableHeaderColumn

      KeybindsTableHeaderRow
        id: header

        KeybindsTableHeaderColumn
          !text: tr("Action")
          width: 286
        
        VerticalSeparator

        KeybindsTableHeaderColumn
          !text: tr("Primary Key")
          width: 100
        
        VerticalSeparator

        KeybindsTableHeaderColumn
          !text: tr("Secondary Key")
          width: 100
    
      HorizontalSeparator

    TableData
      id: keybindsData
      anchors.fill: keybinds
      margin-top: 20
      padding-bottom: 1
      vertical-scrollbar: scrollBar
    
    VerticalScrollBar
      id: scrollBar
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      margin-top: 1
      margin-right: 1
      margin-bottom: 1
      step: 16
      pixels-scroll: true
  
  Panel
    id: buttons
    height: 20

    SmallButton
      id: newAction
      anchors.top: parent.top
      anchors.left: parent.left
      width: 75
      !text: tr('New Action')
      visible: false

    SmallButton
      id: reset
      anchors.top: parent.top
      anchors.right: parent.right
      width: 45
      !text: tr('Reset')
