MainWindow
  size: 700 560
  !text: tr('Cyclopedia')
  visible: false
  @onEscape: toggle()

  UIWidget
    id: buttonSelection
    anchors.top: parent.top
    anchors.left: parent.left
    size: 668 36
    background-color: #404040
    border-width-top: 1
    border-color-top: black
    border-width-left: 1
    border-color-left: black
    border-width-bottom: 1
    border-color-bottom: #747474
    border-width-right: 1
    border-color-right: #747474

    UIButton
      id: items
      anchors.top: parent.top
      anchors.left: parent.left
      margin-left: 1
      size: 668 36
      @onClick: SelectWindow("items")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/items_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/items_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/items_off

    UIButton
      id: bestiary
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("bestiary")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/bestiary_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/bestiary_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/bestiary_off

    UIButton
      id: charms
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("charms")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/charms_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/charms_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/charms_off

    UIButton
      id: map
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("map")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/map_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/map_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/map_off

    UIButton
      id: houses
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("houses")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/houses_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/houses_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/houses_off

    UIButton
      id: character
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("character")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/character_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/character_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/character_off

    UIButton
      id: bosstiary
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("bosstiary")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/bosstiary_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/bosstiary_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/bosstiary_off

    UIButton
      id: bossSlot
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("bossSlot")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/bossSlot_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/bossSlot_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/bossSlot_off

    UIButton
      id: magicalArchives
      anchors.top: prev.top
      anchors.left: prev.right
      margin-left: 1
      @onClick: SelectWindow("magicalArchives")

      $on:
        size: 150 34
        image-clip: 0 0 150 34
        image-source: /images/game/cyclopedia/magical_on

      $!on:
        size: 34 34
        image-clip: 0 0 34 34
        image-source: /images/game/cyclopedia/magical_off

      $pressed:
        size: 34 34
        image-clip: 0 34 34 34
        image-source: /images/game/cyclopedia/magical_off
        
  UIWidget
    id: contentContainer
    anchors.top: prev.bottom
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 5


  Button
    id: CloseButton
    size: 40 20
    anchors.bottom: parent.bottom
    anchors.right: parent.right
    !text: tr('Close')
    //font: verdana-bold-8px-antialiased
    text-offset: 0 -1
    color: #C0C0C0
    @onClick: toggle()
  Button
    id: BackButton
    size: 40 20
    anchors.bottom: parent.bottom
    anchors.right: CloseButton.left
    margin-right: 10
    !text: tr('Back')
    //font: verdana-bold-8px-antialiased
    text-offset: 0 -1
    color: #C0C0C0
    enabled: false
    @onClick: toggleBack()
  HorizontalSeparator
    id: BottomSep
    anchors.bottom: CloseButton.top
    anchors.left: parent.left
    anchors.right: parent.right
    margin-bottom: 10
  UIWidget
    id: GoldBase
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    image-source: /images/ui/item
    image-border: 10
    size: 131 20
    UIWidget
      id: Icon
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      image-source: /game_cyclopedia/images/icon_gold
    Label
      id: Value
      anchors.right: Icon.left
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      !text: tr('0')
      text-auto-resize: true
      color: #BDBDBD
  UIWidget
    id: CharmsBase
    anchors.bottom: parent.bottom
    anchors.left: GoldBase.right
    margin-left: 5
    image-source: /images/ui/item
    image-border: 10
    size: 100 20
    UIWidget
      id: Icon
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      image-source: /game_cyclopedia/images/icon_charms
    Label
      id: Value
      anchors.right: Icon.left
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      !text: tr('0')
      text-auto-resize: true
      color: #BDBDBD

  UIWidget
    id: CharmsBase1410
    visible: false
    anchors.bottom: parent.bottom
    anchors.left: prev.right
    margin-left: 5
    image-source: /images/ui/item
    image-border: 10
    size: 100 20
    !tooltip: tr("Minor Charm echoes\nEarned by unlocking or upgrading major charm and promotion your character")
    UIWidget
      id: Icon
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      image-source: /game_cyclopedia/images/minor-charm-echoes
    Label
      id: Value
      anchors.right: Icon.left
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 4
      !text: tr('0 / 0')
      text-auto-resize: true
      color: #BDBDBD
  Button
    id: BestiaryTrackerButton
    size: 90 20
    anchors.bottom: parent.bottom
    anchors.left: prev.right
    margin-left: 5
    !text: tr('Bestiary Tracker')
    font: small-9px
    @onClick: modules.game_cyclopedia.Cyclopedia.toggleBestiaryTracker()
    text-offset: 0 -1
    color: #C0C0C0