NPCOfferLabel < Label
  anchors.left: prev.right
  anchors.top: prev.top
  margin-left: 5
  text-auto-resize: true

NPCItemBox < UICheckBox
  border-width: 1
  border-color: #000000
  color: #aaaaaa
  text-align: center
  text-offset: 0 20
  @onCheckChange: NPCTrade.onItemBoxChecked(self)

  Item
    id: item
    phantom: true
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 5

  $checked:
    border-color: #ffffff

  $hover !checked:
    border-color: #aaaaaa

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

MainWindow
  id: npcWindow
  !text: tr('NPC Trade')
  size: 550 515
  @onEscape: g_game.closeNpcTrade()

  TabButton
    id: buyTab
    !tooltip: tr("List of items that you're able to buy")
    !text: tr('Buy')
    checked: true
    on: true
    anchors.left: parent.left
    anchors.right: parent.horizontalCenter
    anchors.top: parent.top
    margin-right: 5
    margin-top: 5

  TabButton
    id: sellTab
    !tooltip: tr("List of items that you're able to sell")
    !text: tr('Sell')
    anchors.left: parent.horizontalCenter
    anchors.right: parent.right
    anchors.top: parent.top
    margin-left: 5
    margin-top: 5

  FlatPanel
    height: 250
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 10

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

    ScrollablePanel
      id: itemsPanel
      height: 250
      anchors.left: parent.left
      anchors.right: prev.left
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      vertical-scrollbar: itemsPanelListScrollBar
      margin-left: 5
      margin-right: 5
      layout:
        type: grid
        cell-size: 160 90
        flow: true
        auto-spacing: true

  FlatPanel
    id: setupPanel
    height: 140
    enabled: false
    anchors.left: parent.left
    anchors.right: parent.horizontalCenter
    anchors.top: prev.bottom
    margin-top: 10
    margin-right: 5
    image-color: #ffffff88

    Label
      !text: tr('Name:')
      anchors.left: parent.left
      anchors.top: parent.top
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: name

    Label
      !text: tr('Price:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: price

    Label
      !text: tr('Your Money:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: money

    Label
      !text: tr('Weight:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: weight

    Label
      !text: tr('Your Capacity:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: capacity

    Label
      !text: tr('Quantity:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      width: 85

    NPCOfferLabel
      id: quantity

    HorizontalScrollBar
      id: quantityScroll
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 5
      margin-right: 5
      minimum: 1
      maximum: 100
      step: 1
      @onValueChange: NPCTrade.onQuantityValueChange(self:getValue())

  FlatPanel
    id: buyOptions
    height: 140
    anchors.top: prev.top
    anchors.left: parent.horizontalCenter
    anchors.right: parent.right
    margin-left: 5
    image-color: #ffffff88

    Label
      id: searchLabel
      !text: tr('Search:')
      anchors.left: parent.left
      anchors.top: parent.top
      text-auto-resize: true
      margin-top: 7
      margin-left: 5

    TextEdit
      id: searchText
      anchors.left: prev.right
      anchors.top: prev.top
      anchors.right: parent.right
      margin-top: -2
      margin-left: 5
      margin-right: 5
      @onTextChange: NPCTrade.onSearchTextChange()

    CheckBox
      id: buyWithBackpack
      !text: tr('Buy with backpack')
      anchors.top: searchText.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-left: 5
      margin-top: 5
      @onCheckChange: NPCTrade.onBuyWithBackpackChange()

    CheckBox
      id: ignoreCapacity
      !text: tr('Ignore capacity')
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-left: 5
      margin-top: 5
      @onCheckChange: NPCTrade.onIgnoreCapacityChange()

    CheckBox
      id: ignoreEquipped
      !text: tr('Ignore equipped')
      anchors.top: searchText.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-left: 5
      margin-top: 5
      visible: false
      checked: true
      @onCheckChange: NPCTrade.onIgnoreEquippedChange()

    CheckBox
      id: showAllItems
      !text: tr('Show all items')
      anchors.top: prev.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-left: 5
      margin-top: 5
      visible: false
      @onCheckChange: NPCTrade.onShowAllItemsChange()

  Button
    id: tradeButton
    !text: tr('Buy')
    width: 64
    anchors.right: next.left
    anchors.bottom: parent.bottom
    margin-right: 10
    @onClick: NPCTrade.onTradeClick()

  Button
    !text: tr('Close')
    width: 64
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    @onClick: g_game.closeNpcTrade()