// OT-MMO: elegir personaje. 27-oct: estilo VALDREN (marco de hierro, oro #C7A86B) sobre la escena del faro.
// Lista a la izquierda (icono de clase, nombre, nivel y clase; ordenar por nombre, nivel o clase) y a la derecha el
// personaje elegido en grande, con su atuendo animado delante del mar de noche. «Entrar» en oro, «Borrar» discreto.
// characterlist.lua usa estos ids (también los de los bloques ocultos de Tibia del final): no renombrar.
CLColumna < UIButton
  height: 20
  anchors.top: parent.top
  text-align: left
  ttf-font: $otmmo-font-strong
  ttf-font-size: $otmmo-size-sm
  color: #9AA7AE
  image-source: /images/game/entergame/sort-button
  image-clip: 0 0 7 4
  image-size: 7 4
  image-color: #C7A86B
  $hover:
    color: #E8D3A2
  $pressed:
    image-clip: 0 4 7 4
  $checked:
    image-clip: 0 4 7 4
  $!on:
    image-source:
  $on:
    color: #E8D3A2
    image-source: /images/game/entergame/sort-button

CLDato < Label
  anchors.top: parent.top
  margin-top: 29
  text-auto-resize: true
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  color: #9AA7AE
  $on:
    color: #CDBB95

CharacterWidget < UIWidget
  height: 56
  background-color: alpha
  border-width-bottom: 1
  border-color-bottom: #8A734833
  &updateOnStates: |
    function(self)
      local focused = self:isFocused()
      for _, child in ipairs(self:getChildren()) do
        child:setOn(focused)
      end
      if focused then
        self:setBackgroundColor('#C7A86B1F')
        self:setBorderWidth(1)
        self:setBorderColor('#C7A86B')
      else
        self:setBackgroundColor(self.rowColor or 'alpha')
        self:setBorderWidth(0)
        self:setBorderWidthBottom(1)
        self:setBorderColorBottom('#8A734833')
      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: #C7A86B0F

  // Casilla del icono de clase: hierro con borde de oro apagado; se enciende con la fila
  UIWidget
    id: marcoClase
    size: 40 40
    anchors.verticalCenter: parent.verticalCenter
    anchors.left: parent.left
    margin-left: 8
    background-color: #10161C99
    border-width: 1
    border-color: #6E5B37
    phantom: true
    $on:
      border-color: #C7A86B

  UIWidget
    id: iconoClase
    size: 32 32
    anchors.centerIn: marcoClase
    image-smooth: false
    phantom: true

  // El atuendo de la fila ya no se dibuja aquí (va en grande a la derecha): el widget se queda para la lógica.
  UICreature
    id: outfitCreatureBox
    size: 0 0
    visible: false
    anchors.top: parent.top
    anchors.left: parent.left
    phantom: true

  Label
    id: name
    anchors.top: parent.top
    anchors.left: marcoClase.right
    margin-top: 9
    margin-left: 12
    text-auto-resize: true
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    color: #E2E5E6
    $on:
      color: #F3E6C4

  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.right: parent.right
    margin-right: 10
    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
    anchors.left: name.left
    &baseText: 'Nivel %s'

  CLDato
    id: puntoClase
    !text: '·'
    anchors.left: level.right
    margin-left: 6

  CLDato
    id: vocation
    anchors.left: puntoClase.right
    margin-left: 6

  CLDato
    id: worldName
    visible: false
    anchors.left: parent.left
    &baseText: '%s'

// Hueco libre del cupo: se ve que aún cabe un personaje y lleva a «Nuevo personaje».
CLHueco < UIButton
  height: 56
  focusable: false
  border-width-bottom: 1
  border-color-bottom: #8A734833
  !text: tr('+  Espacio libre')
  text-align: left
  text-offset: 60 0
  ttf-font: $otmmo-font
  ttf-font-size: $otmmo-size-sm
  color: #9AA7AE99
  $hover:
    color: #E8D3A2
    background-color: #C7A86B0F

ValdrenVentana
  id: charactersWindow
  !text: tr('Elige tu personaje')
  size: 824 460
  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)

  // ---- Columna izquierda: ordenar, lista, nuevo personaje y cupo
  UIWidget
    id: characterTable
    anchors.left: parent.left
    anchors.top: parent.top
    width: 300
    height: 20

    Label
      id: ordenarPor
      !text: tr('Ordenar por')
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      text-auto-resize: true
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-sm
      color: #9AA7AE

    CLColumna
      id: characterSort
      width: 64
      anchors.left: ordenarPor.right
      margin-left: 12
      image-offset: 54 8
      !text: tr('Nombre')
      @onClick: onSortButtonClick(self, 1)

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

    CLColumna
      id: levelSort
      width: 46
      anchors.left: characterSort.right
      margin-left: 12
      image-offset: 34 8
      !text: tr('Nivel')
      @onClick: onSortButtonClick(self, 3)

    CLColumna
      id: vocationSort
      width: 50
      anchors.left: levelSort.right
      margin-left: 12
      image-offset: 38 8
      !text: tr('Clase')
      @onClick: onSortButtonClick(self, 4)

    CLColumna
      id: worldSort
      visible: false
      width: 1
      anchors.left: parent.left
      @onClick: onSortButtonClick(self, 5)

  TextList
    id: characters
    anchors.top: characterTable.bottom
    anchors.left: parent.left
    anchors.right: characterListScrollBar.left
    anchors.bottom: buttonNuevo.top
    margin-top: 8
    margin-bottom: 20
    background-color: alpha
    border-width-top: 1
    border-color-top: #8A734833
    focusable: false
    vertical-scrollbar: characterListScrollBar
    auto-focus: first

  VerticalScrollBar
    id: characterListScrollBar
    anchors.top: characterTable.bottom
    anchors.bottom: buttonNuevo.top
    anchors.left: characterTable.right
    margin-top: 8
    margin-bottom: 20
    margin-left: -12
    step: 16
    pixels-scroll: true

  ValdrenBotonSec
    id: buttonNuevo
    !text: tr('Nuevo personaje')
    size: 156 36
    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
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: #B4BEC4

  // ---- Columna derecha: el personaje elegido
  UIWidget
    id: detalle
    anchors.top: parent.top
    anchors.left: characterTable.right
    anchors.right: parent.right
    anchors.bottom: buttonOk.top
    margin-left: 20
    margin-bottom: 16
    phantom: true

    // Escena: recorte del mar de noche del login (x2 exacto: 228x170 del arte en 456x340); detalle.lua la coloca
    ValdrenArte
      id: escena
      anchors.top: parent.top
      anchors.left: parent.left
      size: 456 340
      image-source: /images/login/noche-cielo
      image-clip: 52 30 228 170

    UIWidget
      id: suelo
      anchors.bottom: escena.bottom
      anchors.left: escena.left
      anchors.right: escena.right
      height: 120
      margin-left: 1
      margin-right: 1
      margin-bottom: 1
      background-color: #10161CB3
      phantom: true

    UIWidget
      id: sombra
      size: 96 24
      anchors.horizontalCenter: escena.horizontalCenter
      anchors.bottom: suelo.top
      margin-bottom: -12
      image-source: /images/login/noche-sombra
      image-smooth: false
      phantom: true

    UICreature
      id: figura
      size: 192 192
      anchors.horizontalCenter: escena.horizontalCenter
      anchors.bottom: suelo.top
      margin-bottom: -12
      margin-left: -24
      fixed-creature-size: true
      phantom: true

    UIWidget
      id: figuraClase
      size: 96 96
      anchors.horizontalCenter: escena.horizontalCenter
      anchors.bottom: suelo.top
      margin-bottom: 8
      image-smooth: false
      visible: false
      phantom: true

    Label
      id: detalleNombre
      anchors.top: suelo.top
      anchors.horizontalCenter: suelo.horizontalCenter
      margin-top: 18
      text-auto-resize: true
      ttf-font: geistsemibold
      ttf-font-size: 24
      color: #F3E6C4
      phantom: true

    UIWidget
      id: detalleFila
      anchors.top: detalleNombre.bottom
      anchors.horizontalCenter: suelo.horizontalCenter
      margin-top: 10
      height: 32
      width: 200
      phantom: true

      UIWidget
        id: detalleIcono
        size: 32 32
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        image-smooth: false
        phantom: true

      Label
        id: detalleInfo
        anchors.left: detalleIcono.right
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 10
        text-auto-resize: true
        ttf-font: $otmmo-font
        ttf-font-size: $otmmo-size-md
        color: #E8D3A2
        phantom: true

    Label
      id: detalleMundo
      anchors.top: detalleFila.bottom
      anchors.horizontalCenter: suelo.horizontalCenter
      margin-top: 6
      text-auto-resize: true
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-sm
      color: #B4BEC4
      phantom: true

    Label
      id: detalleVacio
      visible: false
      anchors.bottom: escena.bottom
      anchors.horizontalCenter: escena.horizontalCenter
      margin-bottom: 40
      width: 340
      text-wrap: true
      text-auto-resize: true
      text-align: center
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-md
      color: #F3E6C4
      !text: tr('Aún no tienes personajes.\nCrea el primero con «Nuevo personaje».')
      phantom: true

  // ---- Acciones del personaje elegido (abajo a la derecha): Borrar discreto, Volver y Entrar en oro
  ValdrenBoton
    id: buttonOk
    !text: tr('Entrar')
    size: 156 36
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    ttf-font-size: 15
    @onClick: CharacterList.doLogin()

  ValdrenBotonSec
    id: buttonCancel
    !text: tr('Volver')
    size: 96 36
    anchors.right: buttonOk.left
    anchors.bottom: parent.bottom
    margin-right: 10
    @onClick: CharacterList.hide(true)

  ValdrenBotonDiscreto
    id: buttonBorrar
    !text: tr('Borrar personaje')
    anchors.left: detalle.left
    anchors.verticalCenter: buttonOk.verticalCenter
    @onClick: CharacterList.borrarPersonaje()

  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