CombatBox < UICheckBox
  size: 20 20
  image-clip: 0 0 20 20
  margin: 2 4

  $checked:
    image-clip: 0 20 20 20

ChaseModeBox < CombatBox
  image-source: /images/game/combatmodes/chasemode
MiniPanel < Panel
  text-offset: 0 3
  text-align: top
  image-source: /images/ui/outfits/minipanel
  image-border: 3
  image-border-top: 22
  padding-left: 6
  padding-bottom: 6
  padding-top: 25
  padding-right: 6
  color: #c7a86b

RotateButton < UIButton
  anchors.bottom: parent.bottom
  size: 20 20
  margin-bottom: 3
  image-source: /images/ui/outfits/rotate_button
  image-color: #dfdfdf

  $hover:
    image-color: #ffffff

PresetButton < Panel
  height: 100
  image-source: /images/ui/button
  image-color: #dfdfdf
  image-clip: 0 0 22 23
  image-border: 3
  border: 1 alpha
  focusable: true
  phantom: false

  $hover:
    image-color: #ffffff

  $focus:
    border: 1 white

  
  UICreature
    id: creature
    anchors.centerIn: parent
    size: 64 64
    phantom: true
  
  Label
    id: title
    anchors.top: creature.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-left: 5
    margin-right: 5
    margin-bottom: 5
    text-align: bottom
    text-wrap: true

  Panel
    id: rename
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: 23
    margin-left: 5
    margin-right: 5
    margin-bottom: 5
    visible: false

    TextEdit
      id: input
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      width: 150
      placeholder: Preset Name
      max-length: 24
    
    Button
      id: save
      anchors.top: parent.top
      anchors.right: parent.right
      anchors.left: prev.right
      margin-left: 5
      text: Guardar

SelectionButton < Panel
  image-source:  /images/ui/button-grey-qt
  image-clip: 0 0 98 40
  image-border: 3
  border: 1 alpha
  focusable: true
  phantom: false
  $focus:
    border: 1 white

  
  UICreature
    id: outfit
    anchors.centerIn: parent
    size: 64 64
    margin-bottom: 10
    phantom: true
  
  Panel
    id: bar
    anchors.centerIn: parent
    visible: false
  
  Label
    id: name
    anchors.top: outfit.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-left: 5
    margin-right: 5
    margin-bottom: 5
    text-align: bottom
    text-wrap: true

OutfitWindow < MainWindow
  size: 735 575
  text: Personalizar personaje
  color: #929292
  @onEnter: modules.game_outfit.accept()
  @onEscape: modules.game_outfit.destroy()

  MiniPanel
    id: preview
    anchors.top: parent.top
    anchors.left: parent.left
    size: 469 220
    text: Vista previa

    Panel
      id: options
      anchors.top: parent.top
      anchors.left: parent.left
      anchors.bottom: parent.bottom
      width: 118
      layout:
        type: verticalBox
        spacing: 5

      FlatPanel
        id: showFloor
        height: 22
        padding: 5

        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver suelo

      FlatPanel
        id: showOutfit
        height: 22
        padding: 5

        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver atuendo
          checked: true

      FlatPanel
        id: showMount
        height: 22
        padding: 5

        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver montura

      FlatPanel
        id: showFamiliar
        height: 22
        padding: 5
        @onSetup: |
          if not g_game.getFeature(GamePlayerFamiliars) then
            self:hide()
            self:setHeight(0)
            self:setPadding(0)
          end

        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver familiar
          @onSetup: |
            if not g_game.getFeature(GamePlayerFamiliars) then
              self:hide()
            end

      FlatPanel
        id: showWings
        height: 22
        padding: 5
        visible:false

        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver alas

      FlatPanel
        id: showAura
        height: 22
        padding: 5
        visible:false
        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver aura

      FlatPanel
        id: showShader
        height: 22
        padding: 5
        visible:false
        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver sombreado

      FlatPanel
        id: showBars
        height: 22
        padding: 5
        visible:true
        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver barras
          
      FlatPanel
        id: showTitle
        height: 22
        padding: 5
        visible:false
        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver título

      FlatPanel
        id: showEffects
        height: 22
        padding: 5
        visible:false
        CheckBox
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          anchors.right: parent.right
          text: Ver efectos

    FlatPanel
      id: panel
      anchors.top: parent.top
      anchors.left: prev.right
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      padding: 1
      margin-left: 5
      clipping: true

      Panel
        id: floor
        anchors.centerIn: parent
        size: 448 448
        
        layout:
          type: grid
          cell-size: 64 64
          flow: true

      UICreature
        id: UIfamiliar
        anchors.centerIn: parent
        size: 64 64
        @onSetup: |
          if not g_game.getFeature(GamePlayerFamiliars) then
            self:hide()
          end

      UICreature
        id: creature
        anchors.centerIn: parent
        size: 64 64
        margin-top: 26
        margin-left: -16
      
      Panel
        id: bars
        anchors.horizontalCenter: prev.horizontalCenter
        anchors.top: prev.top
        margin-top: 47
        margin-right: 20
        size: 300 32

        Label
          id: name
          anchors.top: parent.top
          anchors.left: parent.left
          anchors.right: parent.right
          font: verdana-11px-rounded
          color: #00BC00
          text-align: center
        
        Panel
          id: healthBar
          anchors.top: name.bottom
          anchors.horizontalCenter: name.horizontalCenter
          size: 27 4
          margin-top: 1
          background: #00BC00
          border: 1 black

          Panel
            id: image
            anchors.centerIn: parent

        Panel
          id: manaBar
          anchors.top: prev.bottom
          anchors.horizontalCenter: name.horizontalCenter
          size: 27 4
          background: #0000FF
          border: 1 black

          Panel
            id: image
            anchors.centerIn: parent
      
      ChaseModeBox
        id: movement
        anchors.top: parent.top
        anchors.left: parent.left
        margin-top: 3
        margin-left: 3
        image-color: #dfdfdf
        tooltip: Enable/Disable movement animation

        $hover:
          image-color: #ffffff

      RotateButton
        anchors.left: parent.left
        margin-left: 3
        image-clip: 0 0 20 20
        @onClick: modules.game_outfit.rotate(1)

        $pressed:
          image-clip: 0 20 20 20
      
      RotateButton
        anchors.right: parent.right
        margin-right: 3
        image-clip: 20 0 20 20
        @onClick: modules.game_outfit.rotate(-1)

        $pressed:
          image-clip: 20 20 20 20
  
  MiniPanel
    id: configure
    anchors.top: prev.bottom
    anchors.bottom: separator.top
    anchors.left: parent.left
    width: 130
    margin-top: 5
    margin-bottom: 5
    text: Configurar
    layout:
      type: verticalBox
      spacing: 5

    FlatPanel
      id: addon1
      height: 22
      padding: 5

      CheckBox
        id: check
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
        text: Accesorio 1

    FlatPanel
      id: addon2
      height: 22
      padding: 5

      CheckBox
        id: check
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
        text: Accesorio 2

    FlatPanel
      id: mount
      height: 22
      padding: 5

      CheckBox
        id: check
        anchors.verticalCenter: parent.verticalCenter
        anchors.left: parent.left
        anchors.right: parent.right
        text: Montura

  MiniPanel
    id: appearance
    anchors.top: preview.bottom
    anchors.left: prev.right
    anchors.right: preview.right
    anchors.bottom: prev.bottom
    margin-top: 5
    margin-left: 5
    text: Cambiar aspecto

    ScrollablePanel
      id: settings
      anchors.top: parent.top
      anchors.left: parent.left
      anchors.right: parent.right
      image-source: /images/ui/panel_flat
      image-border: 1
      padding: 5
      padding-right: 15
      height: 86
      vertical-scrollbar: scrollbar
      layout:
        type: verticalBox
        spacing: 2
      
      Panel
        id: preset
        height: 20

        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          size: 12 12
          font: Verdana Bold-11px
          text: Conjunto:
          text-offset: 15 0
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
          text: -
      
      Panel
        id: outfit
        height: 20

        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          text: Atuendo:
          size: 12 12
          font: Verdana Bold-11px
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
      
      Panel
        id: mount
        height: 20

        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Montura:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right

      Panel
        id: familiar
        height: 20
        @onSetup: |
          if not g_game.getFeature(GamePlayerFamiliars) then
            self:hide()
            self:setHeight(0)
          end

        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          text: Familiar:
          size: 12 12
          font: Verdana Bold-11px
          width: 84
          @onSetup: |
            if not g_game.getFeature(GamePlayerFamiliars) then
              self:hide()
            end
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0

        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
          @onSetup: |
            if not g_game.getFeature(GamePlayerFamiliars) then
              self:hide()
            end

      Panel
        id: wings
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Alas:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
      
      Panel
        id: aura
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Aura:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
      
      Panel
        id: shader
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Sombreado:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
      
      Panel
        id: healthBar
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Barra de vida:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right
      
      Panel
        id: effects
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Efectos:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right

      Panel
        id: title
        height: 20
        visible:false
        CheckBoxCircle
          id: check
          anchors.verticalCenter: parent.verticalCenter
          anchors.left: parent.left
          text-offset: 15 0
          size: 12 12
          font: Verdana Bold-11px
          text: Título:
          width: 84
          color: #c0c0c0
          image-source: /images/ui/checkboxcircle
          image-clip: 0 0 12 12

          $hover !disabled:
            color: #C0C0C0
        
        FlatPanel
          id: name
          anchors.top: parent.top
          anchors.bottom: parent.bottom
          anchors.left: prev.right
          anchors.right: parent.right

    VerticalScrollBar
      id: scrollbar
      anchors.top: settings.top
      anchors.right: settings.right
      anchors.bottom: settings.bottom
      step: 24
      pixel-scroll: true

    Panel
      id: colorMode
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: next.top
      margin-top: 3
      margin-bottom: 3
      layout: horizontalBox

      ButtonBox
        id: head
        width: 80
        text: Cabeza
      ButtonBox
        id: primary
        width: 80
        text: Primario
      ButtonBox
        id: secondary
        width: 80
        text: Secundario
      ButtonBox
        id: detail
        width: 81
        text: Detalle

    Panel
      id: colorBoxPanel
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      height: 117
      layout:
        type: grid
        cell-size: 15 15
        cell-spacing: 2
        num-columns: 19
        num-lines: 7

  MiniPanel
    id: presetButtons
    anchors.top: parent.top
    anchors.left: preview.right
    anchors.right: parent.right
    margin-left: 5
    padding-left: 21
    height: 50
    text: Conjuntos guardados
    layout:
      type: horizontalBox
      spacing: 5

    Button
      text: Nuevo
      width: 48
      font: cipsoftFont
      @onClick: modules.game_outfit.newPreset()

    Button
      text: Renombrar
      width: 48
      font: cipsoftFont
      @onClick: modules.game_outfit.renamePreset()

    Button
      text: Guardar
      width: 48
      font: cipsoftFont
      @onClick: modules.game_outfit.savePreset()

    Button
      text: Borrar
      width: 48
      font: cipsoftFont
      @onClick: modules.game_outfit.deletePreset()

  MiniPanel
    id: listSearch
    anchors.top: parent.top
    anchors.left: preview.right
    anchors.right: parent.right
    margin-left: 5
    height: 50
    text: Filtro
    
    QtCheckBox
      id: onlyMine
      anchors.verticalCenter: parent.verticalCenter
      anchors.left: parent.left
      text: "Solo los míos"
      width: 84

    TextEdit
      id: search
      anchors.left: prev.right
      anchors.right: parent.right
      placeholder: Search by name
      placeholder-color: #c0c0c0c0

  ScrollablePanel
    id: presetsList
    anchors.top: presetButtons.bottom
    anchors.left: presetButtons.left
    anchors.right: parent.right
    anchors.bottom: separator.top
    margin-top: 5
    margin-bottom: 5
    image-source: /images/ui/panel_flat
    image-border: 1
    padding: 4
    padding-right: 15
    vertical-scrollbar: presetsScroll
    auto-focus: none
    visible: false
    layout:
      type: verticalBox
      spacing: 2
  
  VerticalScrollBar
    id: presetsScroll
    anchors.top: presetsList.top
    anchors.right: presetsList.right
    anchors.bottom: presetsList.bottom
    step: 80
    pixel-scroll: true
    visible: false

  ScrollablePanel
    id: selectionList
    anchors.top: presetButtons.bottom
    anchors.left: presetButtons.left
    anchors.right: parent.right
    anchors.bottom: separator.top
    margin-top: 5
    margin-bottom: 5
    image-source: /images/ui/panel_flat
    image-border: 1
    padding: 4
    padding-right: 16
    vertical-scrollbar: selectionScroll
    layout:
      type: grid
      cell-size: 104 104
      cell-spacing: 2
      flow: true
  
  VerticalScrollBar
    id: selectionScroll
    anchors.top: selectionList.top
    anchors.right: selectionList.right
    anchors.bottom: selectionList.bottom
    step: 80
    pixel-scroll: true

  HorizontalSeparator
    id: separator
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-bottom: 30

  Button
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    text: Cancelar
    width: 65
    @onClick: modules.game_outfit.destroy()
  
  Button
    anchors.bottom: parent.bottom
    anchors.right: prev.left
    text: Aceptar
    width: 55
    margin-right: 5
    @onClick: modules.game_outfit.accept()