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

  Item
    id: item
    phantom: true
    text-offset: 0 13
    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
    checked: 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
    @onCheckChange: Market.updateCurrentItems()

  MarketButtonBox
    id: filterVocation
    checked: 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
    @onCheckChange: Market.updateCurrentItems()

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

    $disabled:
      color: #aaaaaa44

  MarketButtonBox
    id: filterDepot
    checked: 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
    @onCheckChange: Market.updateCurrentItems()

  Panel
    anchors.top: prev.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-top: 10
    margin-left: 3
    margin-bottom: 5
    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