// OT-MMO (22-oct): lista de personajes con los tokens (guía A.2/A.5). Columnas Personaje · Nivel · Clase · Mundo;
// la de Estado (recompensa diaria, ocultos) era de Tibia y queda oculta. Fila elegida: fondo surface + borde
// acento de 1 px en los cuatro lados (nada de franja lateral). characterlist.lua usa estos ids: no renombrar.
CLColumna < UIButton
  height: 28
  anchors.top: parent.top
  anchors.left: parent.left
  text-align: left
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: $otmmo-text-2
  image-source: /images/game/entergame/sort-button
  image-clip: 0 0 7 4
  image-size: 7 4
  image-color: $otmmo-text-2
  $hover:
    color: $otmmo-text
  $pressed:
    image-clip: 0 4 7 4
  $checked:
    image-clip: 0 4 7 4
  $!on:
    image-source:
  $on:
    color: $otmmo-text
    image-source: /images/game/entergame/sort-button

CLDato < Label
  anchors.top: parent.top
  anchors.left: parent.left
  margin-top: 24
  text-auto-resize: true
  color: $otmmo-text-2
  $on:
    color: $otmmo-text

CharacterWidget < UIWidget
  height: 64
  background-color: alpha
  border-width-bottom: 1
  border-color-bottom: $otmmo-border
  &updateOnStates: |
    function(self)
      local focused = self:isFocused()
      for _, child in ipairs(self:getChildren()) do
        child:setOn(focused)
      end
      if focused then
        self:setBackgroundColor('#232C32')
        self:setBorderWidth(1)
        self:setBorderColor('#C1A16B')
      else
        self:setBackgroundColor(self.rowColor or 'alpha')
        self:setBorderWidth(0)
        self:setBorderWidthBottom(1)
        self:setBorderColorBottom('#39444C')
      end
      local pin = self:getChildById('pin')
      if pin then
        pin:setVisible(focused and g_game.getFeature(GameEnterGameShowAppearance))
      end
    end
  @onFocusChange: self:updateOnStates()
  @onSetup: self:updateOnStates()
  $hover !focus:
    background-color: $otmmo-surface

  UICreature
    id: outfitCreatureBox
    size: 64 64
    anchors.top: parent.top
    anchors.left: parent.left
    margin-left: 8
    fixed-creature-size: true
    phantom: true

  Label
    id: name
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 22
    margin-left: 80
    text-auto-resize: true
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    $on:
      color: $otmmo-text

  Label
    id: mainCharacter
    size: 9 8
    anchors.verticalCenter: name.verticalCenter
    anchors.left: name.right
    margin-left: 8
    image-source: /images/game/entergame/maincharacter
    image-clip: 0 0 9 8
    phantom: true

  CheckBoxButton
    id: pin
    size: 12 12
    anchors.verticalCenter: name.verticalCenter
    anchors.left: parent.left
    margin-left: 248
    visible: false
    !tooltip: tr('Fijar arriba de la lista')
    icon-source: /game_questlog/images/icon-pin
    @onCheckChange: onPinCharacter(self, self:isChecked())
    $checked:
      !tooltip: tr('Quitar de arriba de la lista')
      image-color: $otmmo-accent

  Label
    id: statusDailyReward
    visible: false
    size: 11 19
    anchors.top: parent.top
    anchors.left: parent.left

  Label
    id: statusHidden
    visible: false
    size: 11 19
    anchors.top: parent.top
    anchors.left: parent.left

  CLDato
    id: level
    margin-left: 280
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-md

  CLDato
    id: vocation
    margin-left: 360

  CLDato
    id: worldName
    margin-left: 470
    &baseText: '%s'

MainWindow
  id: charactersWindow
  !text: tr('Elige tu personaje')
  size: 680 384
  visible: false
  @onEnter: CharacterList.doLogin()
  @onEscape: CharacterList.hide(true)
  @onSetup: |
    g_keyboard.bindKeyPress('Up', function() self:getChildById('characters'):focusPreviousChild(KeyboardFocusReason) end, self)
    g_keyboard.bindKeyPress('Down', function() self:getChildById('characters'):focusNextChild(KeyboardFocusReason) end, self)

  UIWidget
    id: characterTable
    anchors.left: parent.left
    anchors.right: characterListScrollBar.left
    anchors.top: parent.top
    height: 28
    border-width-bottom: 1
    border-color-bottom: $otmmo-border

    CLColumna
      id: characterSort
      width: 270
      margin-left: 0
      text-offset: 80 0
      image-offset: 150 12
      !text: tr('Personaje')
      @onClick: onSortButtonClick(self, 1)

    CLColumna
      id: statusSort
      visible: false
      width: 1
      @onClick: onSortButtonClick(self, 2)

    CLColumna
      id: levelSort
      width: 72
      margin-left: 280
      image-offset: 44 12
      !text: tr('Nivel')
      @onClick: onSortButtonClick(self, 3)

    CLColumna
      id: vocationSort
      width: 100
      margin-left: 360
      image-offset: 42 12
      !text: tr('Clase')
      @onClick: onSortButtonClick(self, 4)

    CLColumna
      id: worldSort
      width: 150
      margin-left: 470
      image-offset: 48 12
      !text: tr('Mundo')
      @onClick: onSortButtonClick(self, 5)

  TextList
    id: characters
    anchors.top: characterTable.bottom
    anchors.left: parent.left
    anchors.right: characterListScrollBar.left
    anchors.bottom: buttonNuevo.top
    margin-bottom: 16
    background-color: alpha
    focusable: false
    vertical-scrollbar: characterListScrollBar
    auto-focus: first

  VerticalScrollBar
    id: characterListScrollBar
    anchors.top: parent.top
    anchors.bottom: buttonNuevo.top
    anchors.right: parent.right
    margin-top: 28
    margin-bottom: 16
    step: 16
    pixels-scroll: true

  Label
    id: accountStatusCaption
    visible: false
    height: 0
    !text: tr('Account Status') .. ':'
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: next.top
    @onSetup: |
      if g_game.getFeature(GameEnterGameShowAppearance) then
        self:setMarginBottom(5)
      else
        self:setMarginBottom(1)
      end

  Label
    id: accountStatusIcon
    visible: false
    height: 0
    size: 22 20
    anchors.left: parent.left
    anchors.bottom: next.bottom
    image-source: /images/game/entergame/premium
    image-clip: 0 0 22 20
    @onSetup: |
      if not(g_game.getFeature(GameEnterGameShowAppearance)) then
        self:hide()
      end

  Label
    id: accountStatusLabel
    visible: false
    height: 0
    !text: tr('Free Account')
    anchors.left: parent.left
    text-auto-resize: true
    @onSetup: |
      if g_game.getFeature(GameEnterGameShowAppearance) then
        self:setMarginBottom(15)
        self:setPaddingBottom(2)
        self:setTextOffset({x = 25, y = 0})
        self:addAnchor(AnchorBottom, 'separator', AnchorBottom)
      else
        self:setMarginBottom(5)
        self:addAnchor(AnchorRight, 'parent', AnchorRight)
        self:addAnchor(AnchorBottom, 'separator', AnchorTop)
      end

    $on:
      color: #FF0000

  Button
    id: premiumButton
    visible: false
    height: 0
    !text: tr('Get Premium')
    anchors.right: parent.right
    text-auto-resize: true
    image-color: green
    @onClick: onPremiumButtonClick(self)
    @onSetup: |
      if g_game.getFeature(GameEnterGameShowAppearance) then
        self:setMarginBottom(15)
        self:setPaddingBottom(2)
        self:addAnchor(AnchorBottom, 'separator', AnchorBottom)
      end


  HorizontalSeparator
    id: separator
    visible: false
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: premiumBenefitsPanel.top
    height: 2
    @onSetup: |
      if g_game.getFeature(GameEnterGameShowAppearance) then
        self:setMarginBottom(6)
      else
        self:setMarginBottom(10)
      end

  Panel
    id: premiumBenefitsPanel
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: buttonHidden.top

    @onSetup: |
      self:setHeight(0)
      self:setMarginBottom(0)
      self:hide()

    Label
      id: premiumBenefitsTitle
      !text: tr('Premium Benefits include:')
      anchors.top: parent.top
      anchors.horizontalCenter: parent.horizontalCenter
      margin-top: 2
      padding-left: 6
      padding-right: 6
      color: #cfcfcf
      font: verdana-11px-monochrome
      text-auto-resize: true

    UIWidget
      id: premiumBenefitSpells
      size: 210 52
      anchors.left: parent.left
      anchors.top: parent.top
      margin-top: 22
      margin-left: 12

      UIWidget
        id: premiumBenefitSpellsIcon
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/entergame/premium-icons-32x32
        image-clip: 32 0 32 32

      Label
        id: premiumBenefitSpellsText
        !text: tr('No level cap while training your skills offline')
        anchors.top: premiumBenefitSpellsIcon.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 2
        font: verdana-11px-monochrome
        color: #d7d7d7
        width: 160
        text-wrap: true
        text-align: center
        text-vertical-auto-resize: true

    UIWidget
      id: premiumBenefitMounts
      size: 210 52
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: parent.top
      margin-top: 22

      UIWidget
        id: premiumBenefitMountsIcon
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/entergame/premium-icons-32x32
        image-clip: 96 0 32 32

      Label
        id: premiumBenefitMountsText
        !text: tr('Tame mounts to travel faster')
        anchors.top: premiumBenefitMountsIcon.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 2
        text-auto-resize: true
        font: verdana-11px-monochrome
        color: #d7d7d7

    UIWidget
      id: premiumBenefitVip
      size: 210 52
      anchors.right: parent.right
      anchors.top: parent.top
      margin-top: 22
      margin-right: 12

      UIWidget
        id: premiumBenefitVipIcon
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/entergame/premium-icons-32x32
        image-clip: 512 0 32 32

      Label
        id: premiumBenefitVipText
        !text: tr('Imbue items with stronger effect')
        anchors.top: premiumBenefitVipIcon.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 2
        width: 190
        text-wrap: true
        text-align: center
        text-vertical-auto-resize: true
        font: verdana-11px-monochrome
        color: #d7d7d7

    Label
      id: premiumBenefitsFooter
      !text: tr('... and many more!')
      anchors.left: parent.left
      anchors.bottom: parent.bottom
      margin-left: 8
      text-auto-resize: true
      font: verdana-11px-monochrome
      color: #d7d7d7

    HorizontalSeparator
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      margin-left: 8
      margin-right: 8
      height: 2

  Panel
    id: buttonHidden
    anchors.left: parent.left
    anchors.bottom: autoReconnect.top
    margin-bottom: 6
    size: 165 22
    border-width-top: 1
    border-color-top: black
    border-width-left: 1
    border-color-left: black
    border-width-bottom: 1
    border-color-bottom: #747474
    border-width-right: 1
    border-color-right: #747474
    @onSetup: |
      self:setHeight(0)
      self:setMarginBottom(0)
      self:hide()
    CheckBox
      id: checkBoxHidden
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 6
      checked: true
      !text: tr('Show Hidden Characters')
      text-auto-resize: true
      color: #c0c0c0
      @onCheckChange: onShowHiddenCharacters(self, self:isChecked())


  Panel
    id: buttonOutfit
    anchors.left: buttonHidden.right
    anchors.verticalCenter: buttonHidden.verticalCenter
    margin-left: 10
    size: 100 22
    border-width-top: 1
    border-color-top: black
    border-width-left: 1
    border-color-left: black
    border-width-bottom: 1
    border-color-bottom: #747474
    border-width-right: 1
    border-color-right: #747474
    padding: 1 1 1 1
    @onSetup: |
      self:setHeight(0)
      self:hide()
    CheckBox
      id: checkBoxOutfit
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 6      
      !text: tr('Show Outfit')
      text-auto-resize: true
      color: #c0c0c0
      @onCheckChange: onShowOutfits(self, self:isChecked())

  Button
    id: autoReconnect
    visible: false
    width: 140
    anchors.left: parent.left
    anchors.bottom: parent.bottom

  Button
    id: buttonNuevo
    !text: tr('Nuevo personaje')
    size: 132 28
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    @onClick: CharacterList.nuevoPersonaje()

  Label
    id: cupo
    anchors.left: buttonNuevo.right
    anchors.verticalCenter: buttonNuevo.verticalCenter
    margin-left: 12
    text-auto-resize: true
    color: $otmmo-text-2

  PrimaryButton
    id: buttonOk
    !text: tr('Entrar')
    size: 96 28
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    @onClick: CharacterList.doLogin()

  Button
    id: buttonBorrar
    !text: tr('Borrar personaje')
    size: 132 28
    anchors.right: buttonCancel.left
    anchors.bottom: parent.bottom
    margin-right: 8
    @onClick: CharacterList.borrarPersonaje()

  Button
    id: buttonCancel
    !text: tr('Volver')
    size: 88 28
    anchors.right: buttonOk.left
    anchors.bottom: parent.bottom
    margin-right: 8
    @onClick: CharacterList.hide(true)