UIWidget
  id: Cat1
  anchors.fill: parent
  visible: false
  UILabel
    id: Categorylabel
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 10
    !text: tr('Categories') .. ':'
    text-auto-resize: true
    color: #c0c0c0
  TextList
    id: CategoryList
    vertical-scrollbar: CategoryScrollbar
    anchors.left: parent.left
    anchors.top: parent.top
    margin-top: 30
    size: 200 60
    color: #c0c0c0
    focusable: true
    padding: 1

  VerticalScrollBar
    id: CategoryScrollbar
    anchors.top: CategoryList.top
    anchors.right: CategoryList.right
    anchors.bottom: CategoryList.bottom
    step: 10
    pixels-scroll: true
  VerticalSeparator
    id: MidSep
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    margin-top: 10
    margin-bottom:30
    margin-left: 210

  fakeCheckBox
    id: LevelButton
    size: 47 20
    anchors.left: parent.left
    anchors.top: CategoryList.bottom
    margin-top: 31
    !text: tr("Level")
    font: cipsoftFont
    text-align: center
    color: #dfdfdfff
    image-color: #dfdfdf
    checkable: true
    @onCheckChange: modules.game_cyclopedia.Cyclopedia.levelFilter(self:isChecked())
    
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
    $!checked:
      image-clip: 0 0 22 23
      text-offset: 0 0

  fakeCheckBox
    id: VocationButton
    size: 47 20
    anchors.left: LevelButton.right
    anchors.top: LevelButton.top
    margin-left: 5
    !text: tr("Voc.")
    font: cipsoftFont
    text-align: center
    color: #dfdfdfff
    image-color: #dfdfdf
    checkable: true
    @onCheckChange: modules.game_cyclopedia.Cyclopedia.vocationFilter(self:isChecked())
    
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
    $!checked:
      image-clip: 0 0 22 23
      text-offset: 0 0

  fakeCheckBox
    id: H1Button
    size: 47 20
    anchors.left: VocationButton.right
    anchors.top: LevelButton.top
    margin-left: 5
    !text: tr("1H")
    font: cipsoftFont
    text-align: center
    color: #dfdfdfff
    image-color: #dfdfdf
    checkable: true
    enabled: false
    @onCheckChange: modules.game_cyclopedia.Cyclopedia.handFilter(self:isChecked(), false)
    
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
    $!checked:
      image-clip: 0 0 22 23
      text-offset: 0 0

  fakeCheckBox
    id: H2Button
    size: 47 20
    anchors.left: H1Button.right
    anchors.top: LevelButton.top
    margin-left: 5
    !text: tr("2H")
    font: cipsoftFont
    text-align: center
    color: #dfdfdfff
    image-color: #dfdfdf
    checkable: true
    enabled: false
    @onCheckChange: modules.game_cyclopedia.Cyclopedia.handFilter(false, self:isChecked())
    
    $checked:
      image-clip: 0 46 22 23
      text-offset: 1 1
    
    $!checked:
      image-clip: 0 0 22 23
      text-offset: 0 0
  ComboBox
    id: ItemFilter
    anchors.left: parent.left
    anchors.top: LevelButton.bottom
    margin-top: 4
    font: Verdana Bold-11px
    text-align: center
    color: #c0c0c0
    padding-left: 15
    padding-right: 3
    size: 77 20
    @onOptionChange: modules.game_cyclopedia.Cyclopedia.classificationFilter(self:getCurrentOption().data)
  Label
    id: ItemsLabel
    anchors.top: ItemFilter.bottom
    anchors.left: parent.left
    margin-top: 5
    !text: tr("Items") .. ':'
    text-auto-resize: true
    color: #c0c0c0
  Panel
    id: ItemListBase
    anchors.left: parent.left
    anchors.top: ItemsLabel.bottom
    margin-top: 5
    size: 200 120
    background-color: #414141
    border-width: 1
    border-color-bottom: #747575
    border-color-right: #747575
    border-color-top: #141414
    UIScrollArea
      id: List
      anchors.fill: ItemListBase
      vertical-scrollbar: ListScrollbar
      margin-top: 5
      size: 200 120
      image-border: 10
      padding: 1
      layout:
        type: grid
        cell-size: 200 35
        flow: true
    VerticalScrollBar
      id: ListScrollbar
      anchors.top: List.top
      anchors.right: List.right
      anchors.bottom: List.bottom
      step: 30
      pixel-scroll: true
  UIWidget
    size: 32 32
    id: SelectedItem
    anchors.left: parent.left
    anchors.top: ItemListBase.bottom
    image-source: /images/ui/item
    margin-top: 10
    UIWidget
      id: Rarity
      anchors.fill: parent
    UIItem
      id: Sprite
      anchors.fill: parent
  Label
    id: SearchLabel
    anchors.left: SelectedItem.right
    anchors.top: SelectedItem.top
    margin-left: 5
    !text: tr('Search') .. ':'
    text-auto-resize: true
    color: #BDBDBD
  TextEdit
    id: SearchEdit
    anchors.bottom: SelectedItem.bottom
    anchors.left: SelectedItem.right
    anchors.right: ItemListBase.right
    focusable: true
    height: 17
    margin-left: 5
    !placeholder: tr('Type to search...')
    box-text-padding: 20
    @onTextChange: modules.game_cyclopedia.Cyclopedia.ItemSearch(self:getText())
  UIWidget
    id: SearchClearButton
    anchors.right: SearchEdit.right
    anchors.top: SearchEdit.top
    margin-top: 1
    margin-right: 1
    size: 14 14
    image-source: /images/ui/buttons/button-erase-small-up-2
    image-clip: 0 0 14 14
    tooltip: Clear all text from the search field.
    @onClick: modules.game_cyclopedia.Cyclopedia.ItemSearch("", true)
    $pressed:
      image-source: /images/ui/buttons/button-erase-small-down-2
      image-clip: 0 0 14 14
  UIWidget
    id: LootValue
    height: 64
    anchors.left: parent.left
    anchors.right: SearchClearButton.right
    anchors.top: SelectedItem.bottom
    Label
      id: LootValueLabel
      anchors.left: parent.left
      anchors.top: parent.top
      margin-top: 15
      margin-left: 25
      !text: tr('Loot Value Source') .. ':'
      text-auto-resize: true
      color: #c0c0c0
    CheckBox
      id: NpcBuyCheck
      anchors.top: LootValueLabel.bottom
      anchors.left: LootValueLabel.left
      margin-top: 4
      size: 12 12
      text-align: left
      text-offset: 18 -2
      color: #dfdfdf
      image-color: #dfdfdfff
      image-rect: 0 0 12 12
      image-source: /modules/game_cyclopedia/images/checkbox
      !text: tr('NPC Buy Value')
      width: 130
      checked: true
      @onCheckChange: modules.game_cyclopedia.Cyclopedia.Items.onChangeLootValue(self)

      $hover !disabled:
        color: #ffffff

      $!checked:
        image-clip: 0 0 12 12

      $checked:
        image-clip: 0 12 12 12

      $hover checked:
        image-clip: 0 12 12 12

      $hover !checked:
        image-clip: 0 0 12 12

      $disabled:
        image-color: #dfdfdf88
        color: #dfdfdf88
        opacity: 0.8
        change-cursor-image: false
    CheckBox
      id: MarketCheck
      anchors.top: NpcBuyCheck.bottom
      anchors.left: LootValueLabel.left
      margin-top: 4
      size: 12 12
      text-align: left
      text-offset: 18 -2
      color: #dfdfdf
      image-color: #dfdfdfff
      image-rect: 0 0 12 12
      image-source: /modules/game_cyclopedia/images/checkbox
      !text: tr('Market Average Value')
      width: 150
      @onCheckChange: modules.game_cyclopedia.Cyclopedia.Items.onChangeLootValue(self)

      $hover !disabled:
        color: #ffffff

      $!checked:
        image-clip: 0 0 12 12

      $checked:
        image-clip: 0 12 12 12

      $hover checked:
        image-clip: 0 12 12 12

      $hover !checked:
        image-clip: 0 0 12 12

      $disabled:
        image-color: #dfdfdf88
        color: #dfdfdf88
        opacity: 0.8
        change-cursor-image: false
  Label
    id: EmptyLabel
    anchors.top: parent.top
    anchors.left: MidSep.right
    margin-top: 10
    margin-left: 10
    !text: tr('Please select an item from the list to see its details here.')
    color: #C0C0C0
    text-auto-resize: true
  UIWidget
    id: InfoBase
    anchors.left: MidSep.right
    anchors.top: parent.top
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    visible: false
    Label
      id: BasicDetailsLabel
      anchors.left: parent.left
      anchors.top: parent.top
      margin-left: 15
      margin-top: 15
      !text: tr('Basic Item Details') .. ':'
      text-auto-resize: true
      color: #c0c0c0
    Panel
      id: DetailsBase
      anchors.left: BasicDetailsLabel.left
      anchors.top: BasicDetailsLabel.bottom
      anchors.right: parent.right
      margin-top: 5
      height: 140
      background-color: #414141
      border-width: 1
      border-color-bottom: #747575
      border-color-right: #747575
      border-color-top: #141414
      UIScrollArea
        id: List
        vertical-scrollbar: ListScrollbar
        anchors.fill: parent
        size: 200 60
        padding: 1
        layout:
          type: grid
          cell-size: 425 22
          cell-spacing: 2
          flow: true
        UIWidget
          !text: tr('Status: Loading, please wait...')
      VerticalScrollBar
        id: ListScrollbar
        anchors.top: List.top
        anchors.right: List.right
        anchors.bottom: List.bottom
        step: 80
        pixel-scroll: true
    Panel
      id: SellBase
      anchors.left: DetailsBase.left
      anchors.top: DetailsBase.bottom
      anchors.right: parent.horizontalCenter
      margin-top: 35
      margin-right: -5
      height: 100
      background-color: #414141
      border-width: 1
      border-color-bottom: #747575
      border-color-right: #747575
      border-color-top: #141414
      UIScrollArea
        id: List
        vertical-scrollbar: ListScrollbar
        anchors.fill: parent
        size: 200 60
        padding: 1
        layout:
          type: grid
          cell-size: 210 30
          cell-spacing: 0
          flow: true
      VerticalScrollBar
        id: ListScrollbar
        anchors.top: List.top
        anchors.right: List.right
        anchors.bottom: List.bottom
        step: 80
        pixel-scroll: true
    Label
      id: SellLabel
      anchors.bottom: SellBase.top
      anchors.left: SellBase.left
      margin-bottom: 4
      !text: tr('Sell To') .. ':'
      text-auto-resize: true
      color: #c0c0c0
    Panel
      id: BuyBase
      anchors.left: parent.horizontalCenter
      anchors.top: SellBase.top
      anchors.right: parent.right
      margin-left: 13
      height: 100
      background-color: #414141
      border-width: 1
      border-color-bottom: #747575
      border-color-right: #747575
      border-color-top: #141414
      UIScrollArea
        id: List
        vertical-scrollbar: ListScrollbar
        anchors.fill: parent
        size: 200 60
        padding: 1
        layout:
          type: grid
          cell-size: 210 30
          cell-spacing: 0
          flow: true
      VerticalScrollBar
        id: ListScrollbar
        anchors.top: List.top
        anchors.right: List.right
        anchors.bottom: List.bottom
        step: 80
        pixel-scroll: true
    Label
      id: BuyLabel
      anchors.bottom: BuyBase.top
      anchors.left: BuyBase.left
      margin-bottom: 4
      !text: tr('Buy From') .. ':'
      text-auto-resize: true
      color: #c0c0c0
    UIWidget
      id: MarketGoldPriceBase
      anchors.top: BuyBase.bottom
      anchors.right: parent.right
      margin-top: 25
      image-source: /images/ui/item
      image-border: 10
      size: 100 22
      UIWidget
        id: Icon
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        margin-right: 4
        image-source: /game_cyclopedia/images/icon-goldcoin
      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: name-average-pref
      image-source: /modules/game_cyclopedia/images/ui/names/averagepreferresulting
      anchors.top: BuyBase.bottom
      anchors.left: SellBase.left
      margin-top: 25
      margin-left: 0
      focusable: false
      phantom: false
      visible: true
    TextEdit
      id: OwnValueEdit
      size: 104 20
      anchors.top: MarketGoldPriceBase.bottom
      anchors.right: parent.right
      anchors.left: MarketGoldPriceBase.left
      margin-top: 2
      font: Verdana Bold-11px
      max-length: 9
      text-align: right
      padding-left: 5
      padding-right: 3
    UIWidget
      id: ResultGoldBase
      anchors.top: OwnValueEdit.bottom
      anchors.right: parent.right
      margin-top: 2
      image-source: /images/ui/item
      image-border: 10
      size: 100 22
      UIWidget
        id: Rarity
        anchors.fill: parent
        image-border: 8
        margin: 1
      UIWidget
        id: Icon
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        margin-right: 4
        image-source: /game_cyclopedia/images/icon-goldcoin
      Label
        id: Value
        anchors.right: Icon.left
        anchors.verticalCenter: parent.verticalCenter
        margin-right: 4
        !text: tr('0')
        text-auto-resize: true
        color: #BDBDBD
    CheckBox
      id: TrackCheck
      anchors.left: SellBase.left
      anchors.bottom: parent.bottom
      margin-bottom: 55
      size: 12 12
      text-align: left
      text-offset: 18 -2
      font: pVerdana Bold-11px
      color: #c0c0c0
      image-color: #dfdfdfff
      image-rect: 0 0 12 12
      image-source: /modules/game_cyclopedia/images/checkbox
      !text: tr('Track drops of this item')
      text-auto-resize: true
      @onCheckChange: |
        if self.itemId then
          if self:isChecked() then
            modules.game_cyclopedia.Cyclopedia.Items.addToDropTracker(self.itemId)
          else
            modules.game_cyclopedia.Cyclopedia.Items.removeFromDropTracker(self.itemId)
          end
        end

      $hover !disabled:
        color: #ffffff

      $!checked:
        image-clip: 0 0 12 12

      $checked:
        image-clip: 0 12 12 12

      $hover checked:
        image-clip: 0 12 12 12

      $hover !checked:
        image-clip: 0 0 12 12

      $disabled:
        image-color: #dfdfdf88
        color: #dfdfdf88
        opacity: 0.8
        change-cursor-image: false
    CheckBox
      id: quickSellCheck
      anchors.left: TrackCheck.left
      anchors.top: TrackCheck.bottom
      margin-top: 4
      size: 12 12
      text-align: left
      text-offset: 18 -2
      image-color: #dfdfdfff
      font: pVerdana Bold-11px
      color: #c0c0c0
      image-rect: 0 0 12 12
      image-source: /modules/game_cyclopedia/images/checkbox
      !text: tr('Skip when Quick Selling')
      text-auto-resize: true
      @onCheckChange: |
        if self.itemId then
          if self:isChecked() then
            modules.game_cyclopedia.Cyclopedia.Items.addToQuickSellWhitelist(self.itemId)
          else
            modules.game_cyclopedia.Cyclopedia.Items.removeFromQuickSellWhitelist(self.itemId)
          end
        end

      $hover !disabled:
        color: #ffffff

      $!checked:
        image-clip: 0 0 12 12

      $checked:
        image-clip: 0 12 12 12

      $hover checked:
        image-clip: 0 12 12 12

      $hover !checked:
        image-clip: 0 0 12 12

      $disabled:
        image-color: #dfdfdf88
        color: #dfdfdf88
        opacity: 0.8
        change-cursor-image: false
    CheckBox
      id: quickLootCheck
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      margin-bottom: 35
      size: 12 12
      text-align: left
      text-offset: 18 -2
      font: pVerdana Bold-11px
      color: #c0c0c0
      image-color: #dfdfdfff
      image-rect: 0 0 12 12
      image-source: /modules/game_cyclopedia/images/checkbox
      text-auto-resize: true
      @onSetup: |
        if modules.game_quickloot.QuickLoot.data.filter == 2 then
          self:setText("Loot when Quick Looting")
        else
          self:setText('Skip when Quick Looting')
        end

      $hover !disabled:
        color: #ffffff

      $!checked:
        image-clip: 0 0 12 12

      $checked:
        image-clip: 0 12 12 12

      $hover checked:
        image-clip: 0 12 12 12

      $hover !checked:
        image-clip: 0 0 12 12

      $disabled:
        image-color: #dfdfdf88
        color: #dfdfdf88
        opacity: 0.8
        change-cursor-image: false

  Button
    id: ManageButton
    size: 128 20
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    !text: tr('Manage Containers')
    font: cipsoftFont
    text-color: #c0c0c0
    enabled: true
    @onClick: |
      modules.game_cyclopedia.toggle()
      if modules.game_quickloot and modules.game_quickloot.showQuickLoot then
        modules.game_quickloot.showQuickLoot()
      elseif modules.game_quickloot and modules.game_quickloot.QuickLoot and modules.game_quickloot.QuickLoot.toggle then
        modules.game_quickloot.QuickLoot.toggle()
      end