GemDetailPanel < UIWidget
  UIWidget
    id: fragmentType0
    size: 50 50
    anchors.top: parent.top
    anchors.left: parent.left
    margin-left: 43
    margin-top: 16
    image-source: /images/game/wheel/backdrop_modgrades
    image-clip: 0 0 50 50
    image-shader: image_black_white
    visible: true
    @onClick: modules.game_wheel.GemAtelier.onModRedirect(self)
    @onHoverChange: modules.game_wheel.GemAtelier.onHoverGem(self, self:isHovered())
    UIWidget
      id: hover
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/backdrop_modgrades
      image-smooth: true
      image-clip: 200 0 50 50
      phantom: true
      visible: false
    UIWidget
      id: gemModItem0
      size: 30 30
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-skillwheel-basicmods
      image-shader: image_black_white
      image-clip: 30 0 30 30
      visible: true
      phantom: true
    UIWidget
      id: potential
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-modgrades-potential
      image-smooth: true
      image-clip: 0 0 50 50
      phantom: true
      visible: false

  UIWidget
    id: modLabel0
    size: 192 30
    !text: tr('+3%% Fire Resistence')
    text-auto-resize: false
    font: Verdana Bold-11px
    color: #707070
    anchors.top: prev.bottom
    anchors.left: parent.left
    text-align: center
    margin-top: 9
    margin-left: -29
    visible: true

  UIWidget
    id: fragmentType1
    size: 50 50
    anchors.top: fragmentType0.top
    anchors.left: fragmentType0.right
    margin-left: 162
    image-source: /images/game/wheel/backdrop_modgrades
    image-clip: 0 0 50 50
    image-shader: image_black_white
    visible: true
    @onClick: modules.game_wheel.GemAtelier.onModRedirect(self)
    @onHoverChange: modules.game_wheel.GemAtelier.onHoverGem(self, self:isHovered())
    UIWidget
      id: hover
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/backdrop_modgrades
      image-smooth: true
      image-clip: 200 0 50 50
      phantom: true
      visible: false
    UIWidget
      id: gemModItem1
      size: 30 30
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-skillwheel-basicmods
      image-shader: image_black_white
      image-clip: 30 0 30 30
      phantom: true
      visible: true
    UIWidget
      id: potential
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-modgrades-potential
      image-smooth: true
      image-clip: 0 0 50 50
      phantom: true
      visible: false

  UIWidget
    id: modLabel1
    size: 192 30
    !text: tr('+3%% Fire Resistence')
    font: Verdana Bold-11px
    color: #707070
    anchors.top: modLabel0.top
    anchors.left: modLabel0.right
    text-align: center
    margin-left: 21
    visible: true

  UIWidget
    id: fragmentType2
    size: 50 50
    anchors.top: fragmentType1.top
    anchors.left: fragmentType1.right
    margin-left: 162
    image-source: /images/game/wheel/backdrop_modgrades
    image-clip: 0 0 50 50
    image-shader: image_black_white
    visible: false
    @onClick: modules.game_wheel.GemAtelier.onModRedirect(self)
    @onHoverChange: modules.game_wheel.GemAtelier.onHoverGem(self, self:isHovered())
    UIWidget
      id: hover
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/backdrop_modgrades
      image-smooth: true
      image-clip: 200 0 50 50
      phantom: true
      visible: false
    UIWidget
      id: gemModItem2
      size: 35 35
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-skillwheel-suprememods
      image-shader: image_black_white
      image-clip: 0 0 35 35
      margin-left: 3
      margin-top: -2
      phantom: true
      visible: false
    UIWidget
      id: potential
      size: 50 50
      anchors.verticalCenter: parent.verticalCenter
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/icons-modgrades-potential
      image-smooth: true
      image-clip: 0 0 50 50
      phantom: true
      visible: false

  UIWidget
    id: modLabel2
    size: 192 30
    !text: tr('+3%% Fire Resistence')
    font: Verdana Bold-11px
    color: #707070
    anchors.top: modLabel1.top
    anchors.left: modLabel1.right
    margin-left: 18
    text-align: center
    visible: false

GemPanel < UIWidget
  size: 157 106
  image-source: /images/ui/2pixel-up-frame-borderimage
  image-border: 3

  UIButton
    id: locker
    size: 8 12
    image-source: /images/game/wheel/icon-unlocked
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 12
    margin-left: 12
    tooltip: Click to lock or unlock your gems.
    tooltip-delayed: true
    $checked:
      image-source: /images/game/wheel/icon-locked

  UIButton
    id: gemDomainImage
    size: 26 26
    image-source: /images/game/wheel/icons-gematelier-domainaffinity
    image-clip: 0 0 26 26
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 9
    margin-right: 9
    phantom: true
    visible: false

  UIWidget
    id: gemRevelationItem
    size: 32 32
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 7
    image-source: /images/game/wheel/icons-gematelier-gemvariants
    image-clip: 160 0 32 32
    tooltip-delayed: true

  UIWidget
    id: modType0
    size: 153 30
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    margin-bottom: 9
    margin-left: 2
    visible: false
    UIWidget
      id: fragmentType0
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod0
        size: 30 30
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-basicmods
        image-smooth: true
        image-clip: 30 0 30 30
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

  UIWidget
    id: modType1
    size: 153 30
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    margin-bottom: 9
    margin-left: 2
    visible: false
    UIWidget
      id: fragmentType0
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      margin-left: 19
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod0
        size: 30 30
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-basicmods
        image-smooth: true
        image-clip: 30 0 30 30
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

    UIWidget
      id: fragmentType1
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      margin-right: 19
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod1
        size: 30 30
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-basicmods
        image-smooth: true
        image-clip: 30 0 30 30
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

  UIWidget
    id: modType2
    size: 153 30
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    margin-bottom: 9
    margin-left: 2
    visible: false
    UIWidget
      id: fragmentType0
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod0
        size: 30 30
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-basicmods
        image-smooth: true
        image-clip: 30 0 30 30
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

    UIWidget
      id: fragmentType1
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.horizontalCenter: parent.horizontalCenter
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod1
        size: 30 30
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-basicmods
        image-smooth: true
        image-clip: 30 0 30 30
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

    UIWidget
      id: fragmentType2
      size: 50 50
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      image-source: /images/game/wheel/backdrop_modgrades
      image-clip: 0 0 50 50
      UIWidget
        id: gemMod2
        size: 35 35
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-skillwheel-suprememods
        image-smooth: true
        margin-left: 3
        margin-bottom: 2
        image-clip: 35 0 35 35
        tooltip-delayed: true
      UIWidget
        id: potential
        size: 50 50
        anchors.verticalCenter: parent.verticalCenter
        anchors.horizontalCenter: parent.horizontalCenter
        image-source: /images/game/wheel/icons-modgrades-potential
        image-smooth: true
        image-clip: 0 0 50 50
        phantom: true
        visible: false

Panel
  anchors.fill: parent
  Panel
    id: vessels
    size: 146 154
    anchors.left: parent.left
    anchors.top: parent.top
    image-source: /images/ui/t2pixel-up-frame-borderimage
    image-border: 30
    Label
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: parent.top
      !text: tr('Vessels')
      color: #909090
      margin-top: 2
    Panel
      id: vesselsContent
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      anchors.top: parent.top
      margin-top: 41
      margin-bottom: 23
      margin-right: 28
      margin-left: 28

      UIWidget
        id: vesselCenter
        size: 76 76
        anchors.top: parent.top
        anchors.left: parent.left
        margin-left: 7
        margin-top: 7
        image-source: /images/game/wheel/socket-gematelier
        image-clip: 0 0 76 76






      UIWidget
        id: vesselBg0
        anchors.top: parent.top
        anchors.left: parent.left
        image-source: /images/game/wheel/backdrop_skillwheel_socket_inactive
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 0)
        visible: true

      UIWidget
        id: vessel0
        size: 34 34
        anchors.top: parent.top
        anchors.left: parent.left
        image-source: /images/game/wheel/icons-skillwheel-sockets
        image-clip: 238 0 34 34
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 0)
        visible: false

      UIWidget
        id: selectVessel0
        size: 36 36
        anchors.top: parent.top
        anchors.left: parent.left
        margin-left: -1
        margin-top: -1
        image-source: /images/game/wheel/marker_skillwheelsocket
        visible: false

      UIItem
        id: gemItem0
        size: 32 32
        anchors.top: parent.top
        anchors.left: parent.left
        margin-left: 1
        margin-top: 1
        image-source: /images/game/wheel/icons-gematelier-gemvariants
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 0)
        image-clip: 0 0 32 32
        visible: false
        focusable: true
        draggable: false
        checkable: false
        text: ""







      UIWidget
        id: vesselBg1
        anchors.top: parent.top
        anchors.right: parent.right
        image-source: /images/game/wheel/backdrop_skillwheel_socket_inactive
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 1)
        visible: true

      UIWidget
        id: vessel1
        size: 34 34
        anchors.top: parent.top
        anchors.right: parent.right
        image-source: /images/game/wheel/icons-skillwheel-sockets
        image-clip: 238 0 34 34
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 1)
        visible: false

      UIWidget
        id: selectVessel1
        size: 36 36
        anchors.top: parent.top
        anchors.right: parent.right
        margin-top: -1
        margin-right: -1
        image-source: /images/game/wheel/marker_skillwheelsocket
        visible: false

      UIItem
        id: gemItem1
        size: 32 32
        anchors.top: parent.top
        anchors.right: parent.right
        margin-top: 1
        margin-right: 1
        image-source: /images/game/wheel/icons-gematelier-gemvariants
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 1)
        image-clip: 0 0 32 32
        visible: false
        focusable: true
        draggable: false
        checkable: false
        text: ""







      UIWidget
        id: vesselBg2
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        image-source: /images/game/wheel/backdrop_skillwheel_socket_inactive
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 2)
        visible: true

      UIWidget
        id: vessel2
        size: 34 34
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        image-source: /images/game/wheel/icons-skillwheel-sockets
        image-clip: 170 0 34 34
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 2)
        visible: false

      UIWidget
        id: selectVessel2
        size: 36 36
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        margin-bottom: -1
        margin-left: -1
        image-source: /images/game/wheel/marker_skillwheelsocket
        visible: false

      UIItem
        id: gemItem2
        size: 32 32
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        margin-bottom: 1
        margin-left: 1
        image-source: /images/game/wheel/icons-gematelier-gemvariants
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 2)
        image-clip: 0 0 32 32
        visible: false
        focusable: true
        draggable: false
        checkable: false
        text: ""







      UIWidget
        id: vesselBg3
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        image-source: /images/game/wheel/backdrop_skillwheel_socket_inactive
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 3)
        visible: true

      UIWidget
        id: vessel3
        size: 34 34
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        image-source: /images/game/wheel/icons-skillwheel-sockets
        image-clip: 170 0 34 34
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 3)
        visible: false

      UIWidget
        id: selectVessel3
        size: 36 36
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        margin-bottom: -1
        margin-right: -1
        image-source: /images/game/wheel/marker_skillwheelsocket
        visible: false

      UIItem
        id: gemItem3
        size: 32 32
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        margin-bottom: 1
        margin-right: 1
        image-source: /images/game/wheel/icons-gematelier-gemvariants
        image-clip: 0 0 32 32
        @onClick: modules.game_wheel.GemAtelier.onClickVessel(self, 3)
        visible: false
        focusable: true
        draggable: false
        checkable: false
        text: ""

  Panel
    id: gemRevelation
    size: 146 363
    anchors.left: parent.left
    anchors.top: prev.bottom
    margin-top: 5
    image-source: /images/ui/t2pixel-up-frame-borderimage
    image-border: 30
    Label
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: parent.top
      !text: tr('Gem Revelation')
      color: #909090
      margin-top: 2

    UIWidget
      size: 12 12
      anchors.top: parent.top
      anchors.right: parent.right
      margin-right: 5
      margin-top: 3
      image-source: /images/game/wheel/show-gui-help-grey
      !tooltip: tr('Revealing a gem gives you a gem of matching quality and\nrandom mods based on the quality:\n\n* Lesser gems will have one random basic mod.\n* Regular gems will have two random basic mods.\n* Greater gems will have two random basic mods and\none supreme mod.')

    Panel
      id: gemRevel0
      size: 132 113
      anchors.top: parent.top
      anchors.right: parent.right
      anchors.left: parent.left
      margin-top: 17
      margin-left: 7
      margin-right: 7

      UIItem
        id: gemRevelationItem0
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 20
        margin-left: 19
        margin-right: 20
        virtual: true
        draggable: false
        priceable: false

      Label
        id: gemInfo0
        size: 135 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 60
        margin-left: 19
        margin-right: 20
        !text: tr('Lesser Gem (x 0)')
        text-wrap: true
        text-align: center
        font: Verdana Bold-11px
        color: #c0c0c0

      UIButton
        id: revealButton0
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        size: 64 20
        @onClick: modules.game_wheel.GemAtelier.onRevealGem(self, 0)
        image-source: /images/game/wheel/reveal-button
        image-clip: 0 0 64 20
        image-border: 1
        padding: 1 1 1 1

        $pressed:
          image-clip: 0 20 64 20

        $!on:
          image-clip: 0 40 64 20

        $hover !on:
          image-clip: 0 40 64 20

      Panel
        id: gemRevealCost0
        size: 130 20
        anchors.bottom: parent.bottom
        anchors.left: prev.right
        anchors.right: parent.right
        margin-left: 3
        image-source: /images/ui/progress
        image-border: 7
        Panel
          image-source: /images/game/cyclopedia/icons/icon-goldcoin
          anchors.right: parent.right
          anchors.top: parent.top
          margin-top: 5
          margin-right: 3
        Label
          id: gold
          !text: tr('0')
          anchors.top: parent.top
          anchors.right: prev.left
          margin-right: 2
          margin-top: 2
          text-auto-resize: true
          font: Verdana Bold-11px
          color: #c0c0c0

    Panel
      id: gemRevel1
      size: 132 113
      anchors.top: prev.bottom
      anchors.right: parent.right
      anchors.left: parent.left
      margin-left: 7
      margin-right: 7

      UIItem
        id: gemRevelationItem1
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 20
        margin-left: 19
        margin-right: 20
        virtual: true
        draggable: false
        priceable: false

      Label
        id: gemInfo1
        size: 135 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 60
        margin-left: 19
        margin-right: 20
        !text: tr('Lesser Gem (x 0)')
        text-wrap: true
        text-align: center
        font: Verdana Bold-11px
        color: #c0c0c0

      UIButton
        id: revealButton1
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        size: 64 20
        @onClick: modules.game_wheel.GemAtelier.onRevealGem(self, 1)
        image-source: /images/game/wheel/reveal-button
        image-clip: 0 0 64 20
        image-border: 1
        padding: 1 1 1 1

        $pressed:
          image-clip: 0 20 64 20

        $!on:
          image-clip: 0 40 64 20

        $hover !on:
          image-clip: 0 40 64 20

      Panel
        id: gemRevealCost1
        size: 130 20
        anchors.bottom: parent.bottom
        anchors.left: prev.right
        anchors.right: parent.right
        margin-left: 3
        image-source: /images/ui/progress
        image-border: 7
        Panel
          image-source: /images/game/cyclopedia/icons/icon-goldcoin
          anchors.right: parent.right
          anchors.top: parent.top
          margin-top: 5
          margin-right: 3
        Label
          id: gold
          !text: tr('0')
          anchors.top: parent.top
          anchors.right: prev.left
          margin-right: 2
          margin-top: 2
          text-auto-resize: true
          font: Verdana Bold-11px
          color: #c0c0c0

    Panel
      id: gemRevel2
      size: 132 113
      anchors.top: prev.bottom
      anchors.right: parent.right
      anchors.left: parent.left
      margin-left: 7
      margin-right: 7

      UIItem
        id: gemRevelationItem2
        size: 32 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 20
        margin-left: 19
        margin-right: 20
        virtual: true
        draggable: false
        priceable: false

      Label
        id: gemInfo2
        size: 135 32
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-top: 60
        margin-left: 19
        margin-right: 20
        !text: tr('Lesser Gem (x 0)')
        text-wrap: true
        text-align: center
        font: Verdana Bold-11px
        color: #c0c0c0

      UIButton
        id: revealButton2
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        size: 64 20
        @onClick: modules.game_wheel.GemAtelier.onRevealGem(self, 2)
        image-source: /images/game/wheel/reveal-button
        image-clip: 0 0 64 20
        image-border: 1
        padding: 1 1 1 1

        $pressed:
          image-clip: 0 20 64 20

        $!on:
          image-clip: 0 40 64 20

        $hover !on:
          image-clip: 0 40 64 20

      Panel
        id: gemRevealCost2
        size: 130 20
        anchors.bottom: parent.bottom
        anchors.left: prev.right
        anchors.right: parent.right
        margin-left: 3
        image-source: /images/ui/progress
        image-border: 7
        Panel
          image-source: /images/game/cyclopedia/icons/icon-goldcoin
          anchors.right: parent.right
          anchors.top: parent.top
          margin-top: 5
          margin-right: 3
        Label
          id: gold
          !text: tr('0')
          anchors.top: parent.top
          anchors.right: prev.left
          margin-right: 2
          margin-top: 2
          text-auto-resize: true
          font: Verdana Bold-11px
          color: #c0c0c0

  Panel
    id: clickedPanel
    size: 817 154
    anchors.right: parent.right
    anchors.top: parent.top
    image-source: /images/ui/t2pixel-up-frame-borderimage
    image-border: 30
    Label
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: parent.top
      !text: tr('Click on a gem to see its mods')
      color: #909090
      margin-top: 2

    Panel
      id: cleanContent
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      anchors.left: parent.left
      margin-top:  17
      margin-bottom: 7
      margin-right: 13
      margin-left: 13
      visible: true

      Label
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        !text: tr('There is no gem available.')
        text-auto-resize: true
        font: Verdana Bold-11px
        color: #c0c0c0

    Panel
      id: clickedContent
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      anchors.left: parent.left
      margin-top:  17
      margin-bottom: 7
      margin-right: 13
      margin-left: 13
      visible: false

      UIWidget
        id: gemDetails
        anchors.top: parent.top
        anchors.left: parent.left
        size: 204 110

        Label
          id: gemName
          anchors.top: parent.top
          anchors.horizontalCenter: parent.horizontalCenter
          margin-top: 4
          margin-left: 5
          margin-right: 28
          !text: tr('Lesser Guardian Gem')
          text-auto-resize: true
          font: Verdana Bold-11px
          color: #c0c0c0
        UIWidget
          id: gemDetailItem
          size: 64 64
          anchors.top: parent.top
          anchors.horizontalCenter: parent.horizontalCenter
          margin-top: 17
          margin-left: 6
          margin-right: 29
          image-source: /images/game/wheel/icons-gematelier-gemvariants64
          image-clip: 0 0 64 64
        Label
          id: domainLabel
          size: 26 26
          !text: tr('Domain Affinity')
          text-auto-resize: true
          font: Verdana Bold-11px
          color: #c0c0c0
          anchors.bottom: parent.bottom
          anchors.left: parent.left
          margin-bottom: 17
          margin-left: -2
        UIWidget
          id: domain
          size: 26 26
          anchors.bottom: parent.bottom
          anchors.right: parent.right
          margin-bottom: 11
          margin-right: 45
          image-source: /images/game/wheel/icons-gematelier-domainaffinity
          image-clip: 0 0 26 26

      GemDetailPanel
        id: gemMods
        height: 110
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.left: prev.right
        margin-left: -5
      UIButton
        id: placeVessel
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        size: 108 20
        image-source: /images/game/wheel/place-vessel-button
        image-clip: 0 0 108 20
        $pressed:
          image-clip: 0 20 108 20

        @onClick: modules.game_wheel.GemAtelier.manageVessel(false)

      UIButton
        id: removeVessel
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        margin-left: -1
        size: 108 20
        image-source: /images/game/wheel/remove-vessel-button
        image-clip: 0 0 108 20
        visible: false
        $pressed:
          image-clip: 0 20 108 20

        @onClick: modules.game_wheel.GemAtelier.manageVessel(true)

      UIButton
        id: switch
        anchors.bottom: parent.bottom
        anchors.right: next.left
        margin-right: 3
        size: 86 20
        image-source: /images/game/wheel/switch-button
        image-clip: 0 0 86 20
        $pressed:
          image-clip: 0 20 86 20

        $!on:
          image-clip: 0 40 86 20

        @onClick: modules.game_wheel.GemAtelier.onSwitchDomain(self)

      UIWidget
        id: switchCost
        size: 50 20
        anchors.bottom: parent.bottom
        anchors.right: next.left
        margin-right: 10
        image-source: /images/ui/progress
        image-border: 7
        focusable: true
        UIWidget
          image-source: /images/game/cyclopedia/icons/icon-goldcoin
          anchors.right: parent.right
          anchors.top: parent.top
          margin-top: 5
          margin-right: 3
          tooltip: Gold Coins
        UILabel
          id: gold
          !text: tr('0')
          anchors.top: parent.top
          anchors.right: prev.left
          font: Verdana Bold-11px
          color: #c0c0c0
          margin-right: 4
          margin-top: 2
          text-auto-resize: true

      UIButton
        id: destroy
        anchors.bottom: parent.bottom
        anchors.right: parent.right
        margin-right: -1
        size: 86 20
        image-source: /images/game/wheel/destroy-button
        image-clip: 0 0 86 20
        $pressed:
          image-clip: 0 20 86 20

        $!on:
          image-clip: 0 40 86 20
        @onClick: modules.game_wheel.GemAtelier.onDestroyGem(self)

  Panel
    id: filterPanel
    size: 817 20
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 5

    TextEdit
      id: searchText
      size: 155 20
      focusable: true
      anchors.top: parent.top
      anchors.left: parent.left
      !placeholder: tr('Type to search')
      box-text-padding: 27
      @onTextChange: modules.game_wheel.GemAtelier.onSearchChange(self)

      Button
        id: clearSearchButton
        anchors.top: parent.top
        anchors.right: parent.right
        margin-top: 1
        margin-right: 1
        size: 18 18
        image-source: /images/store/button-erase-small-up
        image-clip: 0 0 18 18
        $pressed:
          image-source: /images/store/button-erase-small-down
          image-clip: 0 0 18 18
        @onClick: self:getParent():setText("")

    ComboBox
      id: affinitiesBox
      size: 155 20
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 5
      color: #c0c0c0
      @onSetup: |
        self:addOption("All Affinities")
        self:addOption("Top Left")
        self:addOption("Top Right")
        self:addOption("Bottom Left")
        self:addOption("Bottom Right")
        self:setCurrentOption("All Affinities", true)

    ComboBox
      id: qualitiesBox
      size: 155 20
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 5
      color: #c0c0c0
      @onSetup: |
        self:addOption("All Qualities")
        self:addOption("Lesser")
        self:addOption("Regular")
        self:addOption("Greater")
        self:setCurrentOption("All Qualities", true)

    CheckBox
      id: lockedOnly
      size: 12 12
      !text: tr('Locked only')
      font: Verdana Bold-11px
      text-auto-resize: true
      color: #c0c0c0
      anchors.left: prev.right
      anchors.top: parent.top
      image-source: /images/ui/checkbox
      image-clip: 0 0 12 12
      margin-top: 5
      margin-left: 5
      change-cursor-image: false
      @onCheckChange: modules.game_wheel.GemAtelier.showLockedOnly(self)

      $hover !disabled:
        color: #c0c0c0

    Panel
      id: pagesPanel
      size: 229 20
      anchors.right: parent.right
      anchors.top: parent.top
      UIButton
        id: rightArrow
        size: 20 20
        anchors.right: parent.right
        anchors.top: parent.top
        image-source: /images/ui/arrow-right-button
        image-clip: 0 0 20 20
        @onClick: modules.game_wheel.GemAtelier.managePage(self, true)
        $on:
          image-clip: 0 20 20 20
        $pressed:
          image-clip: 0 40 20 20
        $pressed !on:
          image-clip: 0 0 20 20

      Label
        id: pagesLabel
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        margin-left: 11
        margin-right: 20
        margin-top: 2
        !text: tr('Page 0 / 0 (0 Gems)')
        text-auto-resize: true
        font: Verdana Bold-11px
        color: #c0c0c0
      UIButton
        id: leftArrow
        size: 20 20
        anchors.left: parent.left
        anchors.top: parent.top
        image-source: /images/ui/arrow-left-button
        image-clip: 0 0 20 20
        @onClick: modules.game_wheel.GemAtelier.managePage(self, false)
        $on:
          image-clip: 0 20 20 20
        $pressed:
          image-clip: 0 40 20 20
        $pressed !on:
          image-clip: 0 0 20 20

  UIWidget
    id: gemsPanelBackground
    size: 817 338
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 5
    image-source: /images/ui/1pixel-down-frame
    image-border: 1
    Panel
      id: gemContent
      anchors.fill: parent
      margin: 6 6 3 6
      layout:
        type: grid
        cell-size: 157 106
        cell-spacing: 5
        num-lines: 3
        num-columns: 5