ShopCategory < FlatPanel
  height: 22
  margin: 5
  focusable: false

  Button
    id: button
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 22
    icon-source: images/categories
    icon-align: left
    icon-offset: 6 0
    @onClick: modules.game_shop.select(self)
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
  Label
    id: name
    anchors.fill: prev
    text-offset: 24 0
    text-align: left
    color: #C0C0C0

  UIWidget
    id: expandArrow
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 8
    margin-right: 8
    image-source: images/arrow_down
    visible: false
  
  FlatPanel
    id: subCategories
    anchors.top: button.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    layout: verticalBox
    visible: false
    image-color: #A0A0A0

ShopSubCategory < UIWidget
  height: 22
  focusable: false

  Button
    id: button
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    margin-left: 14
    height: 22
    icon-source: images/categories
    icon-align: left
    icon-offset: 6 0
    @onClick: modules.game_shop.select(self)
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
  Label
    id: name
    anchors.fill: prev
    text-offset: 24 0
    text-align: left
    color: #C0C0C0

  UIWidget
    id: selectArrow
    anchors.verticalcenter: parent.verticalcenter
    anchors.left: parent.left
    margin-top: 1
    margin-left: 4
    image-source: images/arrow_right
    visible: false

HistoryLabel < Label
  anchors.top: parent.top
  anchors.bottom: parent.bottom
  color: #C0C0C0
  text-offset: 3 0

HistoryWidget < UIWidget
  height: 15
  background-color: alpha
  focusable: false
  $hover:
    background-color: #555555
  $pressed:
    background-color: #272727

  $alternate:
    background-color: #383838
  $alternate hover:
    background-color: #2e2e2e
  $alternate pressed:
    background-color: #1d1d1d

  HistoryLabel
    id: date
    anchors.left: parent.left
    margin-left: 1
    width: 130

  VerticalSeparator
    anchors.top: parent.top
    anchors.left: prev.right
    anchors.bottom: parent.bottom

  HistoryLabel
    id: price
    anchors.left: prev.right
    text-align: right
    margin-left: 1
    size: 70 21
    color: #D33C3C
    $on:
      color: #44AD25

  UIWidget
    id: coin
    anchors.verticalcenter: parent.verticalcenter
    anchors.left: prev.right
    image-source: images/coin
    margin-left: 6
    margin-bottom: 1
    phantom: true
    $on:
      image-source: images/coin_second

  VerticalSeparator
    anchors.top: parent.top
    anchors.left: prev.right
    anchors.bottom: parent.bottom
    margin-left: 3

  HistoryLabel
    id: description
    anchors.left: prev.right
    anchors.right: parent.right
    margin-left: 1
    margin-right: 1
    height: 21

HistoryHeader < FlatPanel
  anchors.top: parent.top
  image-color: #A0A0A0
  text-align: left
  text-offset: 3 0
  focusable: false

OfferBuyButton < Button
  anchors.top: prev.bottom
  anchors.left: prev.left
  anchors.right: prev.right
  image-color: #3B86C7
  focusable: false
  @onClick: modules.game_shop.onOfferBuy(self)
  $disabled:
    image-color: #1B3F5E

OfferBuyPrice < FlatPanel
  anchors.top: prev.bottom
  anchors.left: prev.left
  anchors.right: prev.right
  margin-top: 4
  image-color: #A0A0A0
  height: 21
  text: 0
  text-align: center
  color: #C0C0C0
  icon: images/coin
  icon-size: 12 12
  icon-offset-x: 88
  icon-offset-y: 4
  focusable: false
  $disabled:
    color: #ff1f1f
  $on:
    icon: images/coin_second

OfferDescriptionLabel < Label
  text-align: topLeft
  text-wrap: true
  text-vertical-auto-resize: true
  color: #C0C0C0

ShopBalanceWidget < FlatPanel
  image-color: #A0A0A0
  height: 21
  focusable: false

  Label
    id: value
    anchors.fill: parent
    margin-right: 20
    text-align: right
    text: 0
    color: #C0C0C0

  UIWidget
    id: coin
    anchors.right: parent.right
    anchors.verticalcenter: parent.verticalcenter
    image-source: images/coin
    margin-right: 3
    phantom: true
    $on:
      image-source: images/coin_second

ShopBalanceSecondWidget < FlatPanel
  image-color: #A0A0A0
  focusable: false

  Label
    id: value
    anchors.fill: parent
    margin-right: 20
    text-align: right
    text: 0
    color: #C0C0C0

  UIWidget
    anchors.right: parent.right
    anchors.verticalcenter: parent.verticalcenter
    image-source: images/coin_second
    margin-right: 3
    phantom: true

OfferPriceLabel < Label
  anchors.left: parent.left
  margin-right: 6
  margin-bottom: 2
  text-align: right
  color: #C0C0C0
  visible: false

OfferWidget < FlatPanel
  height: 78
  margin-top: 5
  phantom: false
  border: 0 white
  focusable: false
  @onClick: modules.game_shop.selectOffer(self)
  $checked:
    border: 2 white

  ShopBalanceWidget
    id: price
    size: 100 21
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin: 4

  ShopBalanceWidget
    id: additionalPrice
    size: 100 21
    anchors.right: prev.right
    anchors.bottom: prev.top
    margin-bottom: 4
    visible: false

  OfferPriceLabel
    id: count
    anchors.right: price.left
    anchors.verticalcenter: price.verticalcenter

  OfferPriceLabel
    id: additionalCount
    anchors.right: additionalPrice.left
    anchors.verticalcenter: additionalPrice.verticalcenter

  FlatPanel
    id: imagePanel
    anchors.left: parent.left
    anchors.verticalcenter: parent.verticalcenter
    margin-left: 4
    size: 70 70

    UIWidget
      id: image
      anchors.fill: parent
      margin: 3
      visible: false
      phantom: true
    
    UICreature
      id: outfit
      anchors.fill: parent
      margin-right: 6
      margin-bottom: 6
      visible: false
      phantom: true
      animate: true
    
    UICreature
      id: mount
      anchors.fill: parent
      margin-right: 8
      margin-bottom: 8
      visible: false
      phantom: true
      animate: true

    UIItem
      id: item
      anchors.centerIn: parent
      size: 34 34
      virtual: true
      visible: false
      phantom: true
    
  Label
    id: name
    anchors.top: parent.top
    anchors.left: prev.right
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin: 8
    text-align: topLeft
    text-wrap: true
    color: #C0C0C0

MainWindow
  id: shopWindow
  !text: 'Store'
  size: 776 533
  color: #909090
  @onEscape: modules.game_shop.hide()
  @onEnter: modules.game_shop.onSearch()

  FlatPanel
    id: categoriesList
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    margin-bottom: 40
    width: 180
    image-color: #C0C0C0
    layout: verticalBox
    focusable: false

  TextEdit
    id: searchTextEdit
    width: 150
    anchors.left: prev.left
    anchors.right: prev.right
    anchors.bottom: prev.bottom
    margin: 7
    margin-right: 29
    placeholder: Type to search
    placeholder-color: #667070
    color: #C0C0C0
    @onTextChange: modules.game_shop.onTypeSearch(self)

  Button
    id: searchButton
    anchors.top: prev.top
    anchors.left: prev.right
    anchors.bottom: prev.bottom
    icon-source: images/search
    icon-align: center
    icon-size: 16 16
    icon-offset: 2 2
    icon-color: #FFFFFFFF
    width: 22
    enabled: false
    focusable: false
    @onClick: modules.game_shop.onSearch()
    $pressed:
      icon-offset: 4 4
    $disabled:
      icon-color: #C0C0C066

  HorizontalSeparator
    anchors.top: categoriesList.bottom
    anchors.right: parent.right
    anchors.left: parent.left
    margin-top: 8

  Button
    id: buttonCancel
    !text: 'Close'
    width: 64
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    color: #C0C0C0
    focusable: false
    @onClick: modules.game_shop.hide()

  Button
    id: historyButtonTop
    !text: 'History'
    width: 64
    anchors.top: prev.top
    anchors.right: prev.left
    margin-right: 5
    color: #C0C0C0
    focusable: false
    @onClick: modules.game_shop.showHistory()

  ShopBalanceWidget
    id: balance
    size: 105 21
    anchors.left: parent.left
    anchors.bottom: parent.bottom

  ShopBalanceSecondWidget
    id: balanceSecond
    size: 105 21
    margin-left: 6
    anchors.top: prev.top
    anchors.left: prev.right

  Button
    anchors.top: prev.top
    anchors.left: prev.right
    text: Get
    text-align: left
    text-offset: 16 0
    color: #C0C0C0
    image-color: #89ff89
    icon: images/coin
    icon-size: 12 12
    icon-offset: 40 5
    size: 64 20
    margin-left: 6
    focusable: false
    @onClick: modules.game_shop.buyPoints()
    $pressed:
      text-offset: 17 1
      icon-offset: 41 5
    $on:
      icon: images/coin_second

  Button
    anchors.top: prev.top
    anchors.left: prev.right
    size: 87 20
    margin-left: 6
    icon: images/giftcoin
    icon-offset: 0 0
    focusable: false
    @onClick: modules.game_shop.toggleGiftCoins()
    $pressed:
      icon-offset: 1 0

  FlatPanel
    id: history
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: categoriesList.right
    anchors.bottom: categoriesList.bottom
    margin-left: 6
    padding: 7
    visible: false
    focusable: false

    HistoryHeader
      anchors.left: parent.left
      text-align: center
      text: Date
      size: 131 16

    VerticalSeparator
      anchors.top: parent.top
      anchors.left: prev.right
      height: 16

    HistoryHeader
      anchors.left: prev.right
      margin-left: 1
      text-align: center
      text: Balance
      size: 90 16

    VerticalSeparator
      anchors.top: parent.top
      anchors.left: prev.right
      height: 16

    HistoryHeader
      anchors.left: prev.right
      anchors.right: parent.right
      margin-left: 1
      text-align: center
      text: Description
      height: 16

    FlatPanel
      id: list
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: next.top
      margin-top: 1
      margin-bottom: 5
      layout: verticalBox

    Button
      id: prevPageButton
      text: Prev Page
      width: 96
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      visible: false
      @onClick: modules.game_shop.prevPage()

    Button
      id: nextPageButton
      text: Next Page
      width: 96
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      visible: false
      @onClick: modules.game_shop.nextPage()

    Label
      id: pageLabel
      anchors.verticalcenter: prevPageButton.verticalcenter
      anchors.left: prevPageButton.right
      anchors.right: nextPageButton.left
      text-align: center
      color: #C0C0C0
      text: Page 1/1

  FlatPanel
    id: offers
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.left: categoriesList.right
    anchors.bottom: categoriesList.bottom
    margin-left: 6
    visible: false
    focusable: false

    ScrollableFlatPanel
      id: offersList
      anchors.top: parent.top
      anchors.left: parent.left
      anchors.bottom: parent.bottom
      padding-right: 17
      padding-left: 5
      margin: 5
      width: 260
      vertical-scrollbar: offersListScrollBar
      layout: verticalBox

    VerticalScrollBar
      id: offersListScrollBar
      anchors.top: prev.top
      anchors.bottom: prev.bottom
      anchors.right: prev.right
      step: 50
      pixels-scroll: true

    UIWidget
      id: offerDetails
      anchors.top: prev.top
      anchors.bottom: prev.bottom
      anchors.left: prev.right
      anchors.right: parent.right
      margin-left: 5
      margin-right: 5
      visible: false

      Label
        id: name
        anchors.fill: parent
        text-align: top
        margin-top: 3
        color: #C0C0C0

      FlatPanel
        id: imagePanel
        anchors.top: parent.top
        anchors.left: parent.left
        margin-top: 23
        margin-left: 5
        size: 130 130

        UIWidget
          id: image
          anchors.fill: parent
          margin: 3
          visible: false
        
        UICreature
          id: outfit
          anchors.fill: parent
          margin-right: 6
          margin-bottom: 6
          visible: false
          animate: true
        
        UICreature
          id: mount
          anchors.fill: parent
          margin-right: 8
          margin-bottom: 8
          visible: false
          animate: true

        UIItem
          id: item
          anchors.centerIn: parent
          size: 68 68
          virtual: true
          visible: false

      OfferBuyButton
        id: buyButton
        anchors.top: prev.top
        anchors.left: prev.right
        anchors.right: parent.right
        margin-left: 8
        margin-right: 3

      OfferBuyPrice
        id: price

      OfferBuyButton
        id: additionalBuyButton
        margin-top: 4

      OfferBuyPrice
        id: additionalPrice

      ScrollableFlatPanel
        id: description
        anchors.top: imagePanel.bottom
        anchors.left: imagePanel.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        image-color: #A0A0A0
        margin-top: 10
        margin-right: 13
        padding: 5
        vertical-scrollbar: descriptionScrollBar
        layout: verticalBox

      VerticalScrollBar
        id: descriptionScrollBar
        anchors.top: prev.top
        anchors.bottom: prev.bottom
        anchors.left: prev.right
        step: 50
        pixels-scroll: true