MarketItemBox < UICheckBox
  id: itemBox
  border-width: 1
  border-color: #000000
  color: #aaaaaa
  text-align: center

  Item
    id: item
    phantom: true
    virtual: true
    text-offset: 0 22
    text-align: right
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin: 1

  $checked:
    border-color: #ffffff

  $hover !checked:
    border-color: #aaaaaa

  $disabled:
    image-color: #ffffff88
    color: #aaaaaa88

Panel
  background-color: #22283399
  margin: 1

  MarketComboBox
    id: categoryComboBox
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 3
    margin-right: 3
    margin-left: 3

  MarketComboBox
    id: subCategoryComboBox
    anchors.top: prev.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 3
    margin-right: 3
    margin-left: 3

    $disabled:
      color: #aaaaaa44

  MarketButtonBox
    id: filterLevel
    &default: false
    !text: tr('Level')
    !tooltip: tr('Filter list to match your level')
    anchors.top: prev.bottom
    anchors.left: parent.left
    margin-top: 3
    margin-right: 3
    margin-left: 3
    width: 40
    height: 20

  MarketButtonBox
    id: filterVocation
    &default: false
    !text: tr('Voc.')
    !tooltip: tr('Filter list to match your vocation')
    anchors.top: prev.top
    anchors.left: prev.right
    margin-right: 3
    margin-left: 3
    width: 34
    height: 20

  MarketComboBox
    id: slotComboBox
    anchors.top: prev.top
    anchors.left: prev.right
    anchors.right: parent.right
    margin-right: 3
    margin-left: 3

    $disabled:
      color: #aaaaaa44

  MarketButtonBox
    id: filterDepot
    &default: false
    !text: tr('Show Depot Only')
    !tooltip: tr('Show your depot items only')
    anchors.top: prev.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 6
    margin-right: 3
    margin-left: 3

  Panel
    id: itemsContainer
    anchors.top: prev.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-top: 10
    margin-left: 3
    margin-bottom: 30
    margin-right: 3

    VerticalScrollBar
      id: itemsPanelListScrollBar
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.right: parent.right
      step: 28
      pixels-scroll: true

    ScrollablePanel
      id: itemsPanel
      anchors.left: parent.left
      anchors.right: prev.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      vertical-scrollbar: itemsPanelListScrollBar
      layout:
        type: grid
        cell-size: 36 36
        flow: true
        auto-spacing: true

  Label
    !text: tr('Find') .. ':'
    anchors.top: prev.bottom
    anchors.left: prev.left
    margin-top: 9
    width: 30
    font: verdana-11px-rounded
    text-offset: 0 2

  TextEdit
    id: searchEdit
    anchors.verticalCenter: prev.verticalCenter
    anchors.left: prev.right
    margin-left: 3
    width: 113
    @onTextChange: Market.updateCurrentItems()

  MarketButtonBox
    id: filterSearchAll
    &default: true
    !text: tr('All')
    !tooltip: tr('Search all items')
    anchors.verticalCenter: prev.verticalCenter
    anchors.left: prev.right
    anchors.right: itemsContainer.right
    margin-left: 3