StatsBarDarkBackground < UIWidget
  UIWidget
    anchors.fill: parent
    image-source: /images/ui/containerslot
    image-border: 3

StatsBarNoBackground < UIWidget
  UIWidget
    anchors.fill: parent

StatsHorizontalBarGrade < UIWidget
  UIWidget
    id: grade_border_1
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_2
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_3
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_4
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_left_1
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_left_2
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_right_1
    anchors.right: parent.right
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_right_2
    anchors.right: parent.right
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

StatsVerticalLeftBarGrade < UIWidget
  UIWidget
    id: grade_border_1
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_2
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_3
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_4
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_top_1
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_top_2
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_bottom_1
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_bottom_2
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

InvManaBar < UIStatsBar
  size: 10 30
  image-border: 1

StatsBarUp < UIStatsBar
  StatsBarDarkBackground
    anchors.fill: parent
    phantom: true

  UIWidget
    id: bar
    width: 1
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin: 1
    image-repeated: true

  StatsHorizontalBarGrade
    id: horizontalGrade
    anchors.fill: parent
    visible: false

  Label
    id: text
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    text-align: center
    visible: false
    !text: '9999999999/9999999999'

StatsBarTopWithShrink < UIWidget
  UIWidget
    anchors.fill: parent
    image-source: /images/ui/background
    image-repeated: true

  UIWidget
    anchors.right: rightIncreaseSidePanels.left
    anchors.left: leftIncreaseSidePanels.right
    anchors.top: parent.top
    height: 2
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.right: rightIncreaseSidePanels.left
    anchors.top: parent.top
    anchors.bottom: rightDecreaseSidePanels.bottom
    margin-bottom: -2
    margin-top: 2
    width: 2
    background-color: black
    opacity: 0.35

  UIWidget
    anchors.right: parent.right
    anchors.left: prev.left
    anchors.top: rightDecreaseSidePanels.bottom
    height: 2
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.right: parent.right
    anchors.top: prev.bottom
    anchors.bottom: parent.bottom
    width: 2
    background-color: black
    opacity: 0.35

  UIWidget
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    margin-left: 2
    margin-right: 2
    height: 2
    background-color: black
    opacity: 0.35

  UIWidget
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: leftDecreaseSidePanels.bottom
    width: 1
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.left: parent.left
    anchors.top: leftDecreaseSidePanels.bottom
    anchors.right: leftDecreaseSidePanels.right
    margin-left: 1
    height: 1
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.left: leftDecreaseSidePanels.right
    anchors.bottom: leftDecreaseSidePanels.bottom
    anchors.top: parent.top
    margin-top: 2
    width: 2
    background-color: black
    opacity: 0.35

  UIWidget
    id: leftIncreaseSidePanels
    anchors.left: parent.left
    anchors.top: parent.top
    size: 9 27

  UIWidget
    id: leftDecreaseSidePanels
    anchors.left: parent.left
    anchors.top: leftIncreaseSidePanels.bottom
    size: 9 27

  UIWidget
    id: rightIncreaseSidePanels
    anchors.right: parent.right
    anchors.top: parent.top
    size: 9 27

  UIWidget
    id: rightDecreaseSidePanels
    anchors.right: parent.right
    anchors.top: rightIncreaseSidePanels.bottom
    size: 9 27

TopStatsSkillElement < UIWidget
  height: 20

  Label
    id: level
    !text: '99999'
    color: #c0c0c0ff
    text-align: right
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 7
    font: verdana-11px-monochrome
    
  UIWidget
    id: icon
    size: 9 9
    anchors.verticalCenter: level.verticalCenter
    anchors.left: level.right
    margin-left: 5

  StatsBarUpTransparent
    id: bar
    anchors.verticalCenter: level.verticalCenter
    anchors.left: icon.right
    anchors.right: parent.right
    !statsbar-size: 'tiny'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 5
    height: 5
  
  UIButton
    id: xpBoostBtn
    visible: false
    size: 76 14
    image-source: /images/ui/button-storexp-noborder-idle
    anchors.verticalCenter: level.verticalCenter
    margin-left: 2
    cursor: pointinghand
    @onClick: |
      if modules.game_store and modules.game_store.toggle then
        modules.game_store.toggle()
        g_game.sendRequestStorePremiumBoost()
      end
    $pressed:
      size: 76 14
      image-source: /images/ui/button-storexp-pressed

HarmonyIcon < UIWidget
  size: 13 13
  !tooltip: 'Harmoney'
  image-source: /images/game/vocations/monk/icon-combopoint-empty
  $on:
    image-source: /images/game/vocations/monk/icon-combopoint-filled

MonkStats < UIWidget
  id: monkStats
  enabled: false
  $disabled:
    visible: false
    margin-left: 0
    margin-top: 0
    size: 0 0
  $!disabled:
    visible: true
    margin-left: 7
    width: 103

  Panel
    id: harmonies
    anchors.left: parent.left
    anchors.top: parent.top
    margin-top: -1
    padding: 2
    size: 80 18
    layout:
      type: horizontalBox
      spacing: 3
    HarmonyIcon
    HarmonyIcon
    HarmonyIcon
    HarmonyIcon
    HarmonyIcon

  VerticalSeparator
    id: separatorHarmoniesSerene
    anchors.left: harmonies.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin-left: 5
    margin-top: 2
    margin-bottom: 2
    width: 2

  UIWidget
    id: serene
    anchors.left: separatorHarmoniesSerene.right
    anchors.top: parent.top
    margin-left: 3
    margin-top: 1
    size: 13 13
    !tooltip: 'Serene'
    image-source: /images/game/vocations/monk/icon-serene-off
    $on:
      image-source: /images/game/vocations/monk/icon-serene-on
    @onSetup: self:setOn(true)
    $disabled:
      visible: false
      size: 0 0
    $!disabled:
      visible: true
      size: 13 13

TopStatsBarLargeOnTop < UIWidget
  StatsBarTopWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: icons.top
    anchors.left: parent.left
    anchors.right: proficiencyIcon.left
    !statsbar-type: 'health'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 12
    margin-right: 7
    height: 27

  Panel
    id: proficiencyIcon
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.bottom: icons.bottom
    anchors.right: icons.left
    margin-top: 5
    margin-right: 5
    size: 28 28
    layout:
      type: anchor
    
    UIWidget
      id: highlightProficiencyButton
      size: 28 28
      anchors.top: proficiencyIcon.top
      anchors.left: proficiencyIcon.left
      visible: true
      phantom: true
      image-source: /images/game/topbar/highlight-proficiency-button

    UIProgressRect
      id: proficiencyProgress
      background-color: #1abc9c
      percent: 40
      percent-reverse: true
      phantom: true
      anchors.fill: parent
      margin: 2

    UIButton
      id: proficiencyButton
      image-source: /images/ui/button-grey-qt
      image-clip: 0 0 98 40
      image-border: 2
      !tooltip: 'Proficiency Tree'
      size: 20 20
      margin-left: 0
      anchors.centerIn: parent
      @onClick: |
        if modules.game_proficiency and modules.game_proficiency.toggle then
          modules.game_proficiency.toggle()
        end
      $pressed:
        image-clip: 0 40 98 40

      UIWidget
        id: proficiencyButtonIcon
        image-source: /images/game/topbar/icon-proficiencytree-open
        image-auto-resize: true
        phantom: true
        anchors.centerIn: parent

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 5
    size: 52 27
    layout:
      type: horizontalBox

  MonkStats
    id: monkStats
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.left: icons.right
    margin-top: 5

  StatsBarUp
    id: mana
    anchors.top: icons.top
    anchors.right: parent.right
    anchors.left: monkStats.right
    !statsbar-type: 'mana'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-right: 12
    margin-left: 7
    height: 27
    font: verdana-11px-monochrome
    font-size: 10

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: parent.right
    anchors.left: monkStats.right
    !statsbar-type: 'manashield'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 4
    margin-right: 12
    margin-left: 6
    height: 27
    font: verdana-11px-monochrome 
    font-size: 10

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 6
    margin-left: 12
    margin-right: 18
    height: 0

TopStatsBarParallelOnTop < UIWidget
  StatsBarTopWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 12
    margin-right: 12
    margin-top: 5
    height: 14

  StatsBarUp
    id: mana
    anchors.top: health.bottom
    anchors.left: health.left
    anchors.right: health.right
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 5
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.left: mana.left
    anchors.right: mana.right
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 0
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 7
    margin-left: 12
    margin-right: 18
    height: 14

    // TOP STATS PARALLEL
  ProficiencyTopBarWidget
    id: proficiencyTopBar
    anchors.top: skills.bottom
    anchors.left: parent.left
    anchors.horizontalCenter: parent.horizontalCenter
    margin-right: 60
    size: 113 13

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: skills.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 60
    size: 103 14
    layout:
      type: horizontalBox
    height: 14
    margin-bottom: 20

  MonkStats
    anchors.top: skills.bottom
    anchors.left: icons.right
    anchors.bottom: parent.bottom
    height: 14
    margin-bottom: 20

TopStatsBarDefaultOnTop < UIWidget
  StatsBarTopWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.horizontalCenter
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 12
    margin-right: 3
    margin-top: 5
    height: 14

  StatsBarUp
    id: mana
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.horizontalCenter
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-right: 12
    margin-left: 3
    margin-top: 5
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: mana.right
    anchors.left: mana.left
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 0
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 7
    margin-left: 12
    margin-right: 15
    height: 0

  ProficiencyTopBarWidget
    id: proficiencyTopBar
    anchors.top: skills.bottom
    size: 113 13
    anchors.left: parent.left
    anchors.horizontalCenter: parent.horizontalCenter
    margin-right: 60

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: skills.bottom
    anchors.right: parent.right
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 60
    size: 103 14
    layout:
      type: horizontalBox

  MonkStats
    anchors.top: skills.bottom
    anchors.left: icons.right
    anchors.bottom: parent.bottom


TopStatsBarCompactOnTop < UIWidget
  StatsBarTopWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: icons.top
    anchors.left: parent.left
    anchors.right: proficiencyTopBar.left
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 12
    margin-right: 6
    height: 14
    
  UIWidget
    id: proficiencyTopBar
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.right: icons.left
    margin-right: 6
    size: 113 20
    height: 14
    visible: false

    UIButton
      id: proficiencyButton
      size: 13 13
      image-source: /images/game/topbar/proficiency-button
      image-clip: 0 0 13 13
      !tooltip: tr('Open Weapon Proficiency')
      @onClick: |
        if modules.game_proficiency and modules.game_proficiency.toggle then
          modules.game_proficiency.toggle()
        end
      $pressed:
        image-clip: 0 13 13 13

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 57
    margin-top: 5
    size: 103 14
    layout:
      type: horizontalBox

  MonkStats
    id: monkStats
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.left: icons.right

  StatsBarUp
    id: mana
    anchors.top: icons.top
    anchors.right: parent.right
    anchors.left: monkStats.right
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-right: 12
    margin-left: 3
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: parent.right
    anchors.left: mana.left
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-right: 12
    margin-top: 0
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 7
    margin-left: 12
    margin-right: 18
    height: 0

TopStatsBar < UIWidget
  TopStatsBarLargeOnTop
    id: largeOnTop
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarParallelOnTop
    id: parallelOnTop
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarDefaultOnTop
    id: defaultOnTop
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarCompactOnTop
    id: compactOnTop
    anchors.fill: parent
    visible: false
    phantom: true
    
  TopStatsBarLargeOnBottom
    id: largeOnBottom
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarParallelOnBottom
    id: parallelOnBottom
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarDefaultOnBottom
    id: defaultOnBottom
    anchors.fill: parent
    visible: false
    phantom: true

  TopStatsBarCompactOnBottom
    id: compactOnBottom
    anchors.fill: parent
    visible: false
    phantom: true

// NOTE: Background of exp/skills on top
StatsBarDarkBackground < UIWidget
  UIWidget
    anchors.fill: parent
    image-source: /images/ui/containerslot
    image-border: 3

StatsBarNoBackground < UIWidget
  UIWidget
    anchors.fill: parent

StatsHorizontalBarGrade < UIWidget
  UIWidget
    id: grade_border_1
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_2
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_3
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_4
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_left_1
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_left_2
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_right_1
    anchors.right: parent.right
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

  UIWidget
    id: grade_right_2
    anchors.right: parent.right
    anchors.top: parent.top
    image-source: /images/bars/marker_top
    size: 7 11
    visible: false
    phantom: false

StatsVerticalLeftBarGrade < UIWidget
  UIWidget
    id: grade_border_1
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_2
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    background-color: #ffffffff
    height: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_3
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_border_4
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    anchors.top: parent.top
    background-color: #ffffffff
    width: 1
    visible: false
    phantom: false

  UIWidget
    id: grade_top_1
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_top_2
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_bottom_1
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

  UIWidget
    id: grade_bottom_2
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    image-source: /images/bars/marker_left
    size: 11 7
    visible: false
    phantom: false

StatsBarUp < UIStatsBar
  StatsBarDarkBackground
    anchors.fill: parent
    phantom: true

  UIWidget
    id: bar
    width: 1
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin: 1
    image-repeated: true

  StatsHorizontalBarGrade
    id: horizontalGrade
    anchors.fill: parent
    visible: false

  Label
    id: text
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    text-align: center
    visible: false
    !text: '9999999999/9999999999'

StatsBarUpTransparent < UIStatsBar
  StatsBarNoBackground
    anchors.fill: parent
    phantom: true

  UIWidget
    id: bar
    width: 1
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin: 1
    image-repeated: true

  StatsHorizontalBarGrade
    id: horizontalGrade
    anchors.fill: parent
    visible: false

  Label
    id: text
    anchors.verticalCenter: parent.verticalCenter
    anchors.horizontalCenter: parent.horizontalCenter
    text-align: center
    visible: false
    !text: '9999999999/9999999999'

StatsBarBottomWithShrink < UIWidget
  UIWidget
    anchors.fill: parent
    image-source: /images/ui/background
    image-repeated: true

  UIWidget
    anchors.right: rightBottomIncreaseSidePanels.left
    anchors.left: leftBottomIncreaseSidePanels.right
    anchors.top: parent.top
    height: 2
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.right: rightBottomIncreaseSidePanels.left
    anchors.top: parent.top
    anchors.bottom: rightBottomDecreaseSidePanels.bottom
    margin-bottom: -2
    margin-top: 2
    width: 2
    background-color: black
    opacity: 0

  UIWidget
    anchors.right: parent.right
    anchors.left: prev.left
    anchors.top: rightBottomDecreaseSidePanels.bottom
    height: 2
    background-color: white
    opacity: 0.35

  UIWidget
    anchors.right: parent.right
    anchors.top: prev.bottom
    anchors.bottom: parent.bottom
    width: 2
    background-color: black
    opacity: 0

  UIWidget
    anchors.right: parent.right
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    margin-left: 2
    margin-right: 2
    height: 2
    background-color: black
    opacity: 0

  UIWidget
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.top: leftBottomDecreaseSidePanels.bottom
    width: 1
    background-color: white
    opacity: 0

  UIWidget
    anchors.left: parent.left
    anchors.top: leftBottomDecreaseSidePanels.bottom
    anchors.right: leftBottomDecreaseSidePanels.right
    margin-left: 1
    height: 1
    background-color: white
    opacity: 0

  UIWidget
    anchors.left: leftBottomDecreaseSidePanels.right
    anchors.bottom: leftBottomDecreaseSidePanels.bottom
    anchors.top: parent.top
    margin-top: 2
    width: 2
    background-color: black
    opacity: 0

  UIWidget
    id: leftBottomIncreaseSidePanels
    anchors.left: parent.left
    anchors.top: parent.top
    size: 0 0

  UIWidget
    id: leftBottomDecreaseSidePanels
    anchors.left: parent.left
    anchors.top: leftBottomIncreaseSidePanels.bottom
    size: 0 0

  UIWidget
    id: rightBottomIncreaseSidePanels
    anchors.right: parent.right
    anchors.top: parent.top
    size: 0 0

  UIWidget
    id: rightBottomDecreaseSidePanels
    anchors.right: parent.right
    anchors.top: rightBottomIncreaseSidePanels.bottom
    size: 0 0


BottomStatsSkillElement < UIWidget
  height: 20

  Label
    id: levelBottom
    !text: '99999'
    color: #c0c0c0ff
    text-align: right
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 10

  UIWidget
    id: icon
    size: 9 9
    anchors.verticalCenter: levelBottom.verticalCenter
    anchors.left: levelBottom.right
    margin-left: 7

  StatsBarUp
    id: bar
    anchors.verticalCenter: levelBottom.verticalCenter
    anchors.left: icon.right
    anchors.right: next.left
    !statsbar-size: 'tiny'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 5
    height: 6
  
  UIWidget
    id: xpBoostBtn
    size: 76 14
    visible: false
    image-source: /images/ui/button-storexp
    anchors.verticalCenter: levelBottom.verticalCenter
    margin-left: 2
    @onClick: |
      if modules.game_store and modules.game_store.toggle then
        modules.game_store.toggle()
        g_game.sendRequestStorePremiumBoost()
      end

TopStatsBarLargeOnBottom < UIWidget
  StatsBarBottomWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: icons.top
    anchors.left: parent.left
    anchors.right: proficiencyIcon.left
    !statsbar-type: 'health'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 7
    margin-right: 7
    margin-top: 0
    margin-bottom: 6
    height: 27

  Panel
    id: proficiencyIcon
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.bottom: icons.bottom
    anchors.right: icons.left
    margin-top: 7
    margin-right: 5
    size: 28 28
    layout:
      type: anchor
  
    UIWidget
      id: highlightProficiencyButton
      size: 28 28
      anchors.top: proficiencyIcon.top
      anchors.left: proficiencyIcon.left
      visible: true
      image-source: /images/game/topbar/highlight-proficiency-button

    UIProgressRect
      id: proficiencyProgress
      background-color: #1abc9c
      percent: 40
      percent-reverse: true
      phantom: true
      anchors.fill: parent
      margin: 2

    UIButton
      id: proficiencyButton
      image-source: /images/ui/button-grey-qt
      image-clip: 0 0 98 40
      image-border: 2
      !tooltip: 'Proficiency Tree'
      size: 20 20
      margin-left: 0
      anchors.centerIn: parent
      @onClick: |
        if modules.game_proficiency and modules.game_proficiency.toggle then
          modules.game_proficiency.toggle()
        end
      $pressed:
        image-clip: 0 40 98 40

      UIWidget
        id: proficiencyButtonIcon
        image-source: /images/game/topbar/icon-proficiencytree-open
        image-auto-resize: true
        phantom: true
        anchors.centerIn: parent

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 7
    margin-bottom: 3
    size: 75 27
    layout:
      type: horizontalBox

  MonkStats
    id: monkStats
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.left: icons.right
    margin-top: 7

  StatsBarUp
    id: mana
    anchors.top: icons.top
    anchors.right: parent.right
    anchors.left: monkStats.right
    !statsbar-type: 'mana'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 7
    margin-right: 7
    margin-top: 0
    height: 27

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: parent.right
    anchors.left: mana.left
    !statsbar-type: 'manashield'
    !statsbar-size: 'large'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-right: 7
    margin-top: 0
    height: 27

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 8
    margin-right: 6
    height: 0

TopStatsBarParallelOnBottom < UIWidget
  StatsBarBottomWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 3
    margin-right: 3
    margin-top: 8
    height: 14

  StatsBarUp
    id: mana
    anchors.top: health.bottom
    anchors.left: health.left
    anchors.right: health.right
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 3
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.left: mana.left
    anchors.right: mana.right
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 0
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-right: 6
    margin-top: 3
    height: 0

  ProficiencyTopBarWidget
    id: proficiencyTopBar
    anchors.top: skills.bottom
    anchors.left: parent.left
    anchors.horizontalCenter: parent.horizontalCenter
    margin-right: 60
    size: 113 13

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: skills.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 60
    size: 103 14
    layout:
      type: horizontalBox
  
  MonkStats
    id: monkStats
    anchors.top: skills.bottom
    anchors.left: icons.right
    anchors.bottom: parent.bottom
    height: 14
    margin-bottom: 20

TopStatsBarDefaultOnBottom < UIWidget
  StatsBarBottomWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.horizontalCenter
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 3
    margin-right: 4
    margin-top: 8
    height: 14

  StatsBarUp
    id: mana
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: parent.horizontalCenter
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 4
    margin-right: 3
    margin-top: 8
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: mana.right
    anchors.left: mana.left
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 0
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 7
    margin-right: 3
    height: 0

  ProficiencyTopBarWidget
    id: proficiencyTopBar
    anchors.top: skills.bottom
    size: 113 13
    anchors.left: parent.left
    anchors.horizontalCenter: parent.horizontalCenter
    margin-right: 60

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: skills.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 60
    size: 103 14
    layout:
      type: horizontalBox
  
  MonkStats
    id: monkStats
    anchors.top: skills.bottom
    anchors.left: icons.right
    anchors.bottom: parent.bottom

TopStatsBarCompactOnBottom < UIWidget
  StatsBarBottomWithShrink
    anchors.fill: parent

  StatsBarUp
    id: health
    anchors.top: icons.top
    anchors.left: parent.left
    anchors.right: proficiencyTopBar.left
    !statsbar-type: 'health'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 7
    margin-right: 7
    height: 14

  UIWidget
    id: proficiencyTopBar
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    anchors.right: icons.left
    margin-right: 6
    size: 113 20
    height: 14
    visible: false

    UIButton
      id: proficiencyButton
      size: 13 13
      image-source: /images/game/topbar/proficiency-button
      image-clip: 0 0 13 13
      !tooltip: tr('Open Weapon Proficiency')
      @onClick: |
        if modules.game_proficiency and modules.game_proficiency.toggle then
          modules.game_proficiency.toggle()
        end
      $pressed:
        image-clip: 0 13 13 13

  Panel
    id: icons
    image-border: 3
    image-source: /images/ui/containerslot
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-left: 57
    margin-top: 5
    size: 103 14
    layout:
      type: horizontalBox

  MonkStats
    id: monkStats
    anchors.top: icons.top
    anchors.bottom: icons.bottom
    anchors.left: icons.right

  StatsBarUp
    id: mana
    anchors.top: icons.top
    anchors.right: parent.right
    anchors.left: monkStats.right
    !statsbar-type: 'mana'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-left: 7
    margin-right: 7
    height: 14

  StatsBarUp
    id: manashield
    anchors.top: mana.bottom
    anchors.right: parent.right
    anchors.left: mana.left
    !statsbar-type: 'manashield'
    !statsbar-size: 'small'
    !statsbar-orientation: 'horizontal'
    statsbar-text: true
    margin-top: 0
    margin-right: 7
    height: 14

  Panel
    id: skills
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: manashield.bottom
    margin-top: 7
    margin-right: 6
    height: 0

// Proficiency XP Bar Widget for TopBar
// Structure: [Button+Highlight] [Progress Bar with % label] [Tree Icon]
ProficiencyTopBarWidget < UIWidget
  id: proficiencyTopBar
  size: 113 20
  height: 14
  visible: false

  UIButton
    id: proficiencyButton
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    size: 13 13
    image-source: /images/game/topbar/proficiency-button
    image-clip: 0 0 13 13
    !tooltip: tr('Open Weapon Proficiency')
    @onClick: |
      if modules.game_proficiency and modules.game_proficiency.toggle then
        modules.game_proficiency.toggle()
      end
    $pressed:
      image-clip: 0 13 13 13

  UIWidget
    id: highlightProficiencyButton
    size: 15 15
    anchors.top: proficiencyButton.top
    anchors.left: proficiencyButton.left
    margin-top: -1
    margin-left: -1
    visible: false
    phantom: true
    image-source: /images/game/topbar/highlight-proficiency-button

  UIWidget
    id: proficiencyBg
    anchors.left: proficiencyButton.right
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin-left: 3
    image-source: /images/ui/containerslot
    image-border: 2
    !tooltip: tr('Proficiency Progress')

  ProgressBar
    id: proficiencyProgress
    anchors.left: proficiencyBg.left
    anchors.right: proficiencyBg.right
    anchors.top: proficiencyBg.top
    anchors.bottom: proficiencyBg.bottom
    margin: 1 1 1 1
    background-color: #1abc9c
    percent: 0

  Label
    id: proficiencyLabel
    anchors.left: proficiencyBg.left
    anchors.right: proficiencyBg.right
    anchors.verticalCenter: proficiencyBg.verticalCenter
    text-align: center
    font: verdana-11px-monochrome
    font-size: 10
    color: #ffffff
    text: 0%
    phantom: true

  UIWidget
    id: proficiencyIconTree
    anchors.right: proficiencyBg.right
    anchors.verticalCenter: proficiencyBg.verticalCenter
    margin-right: -4
    size: 9 11
    phantom: true
    image-source: /images/game/topbar/icon-proficiencytree-off
    $on:
      image-source: /images/game/topbar/icon-proficiencytree-on