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

NPCPanel < ScrollablePanel
  image-source: /core_styles/styles/images/panel_flat.png
  image-border: 1

NPCItemBox < UICheckBox
  border-width: 1
  border-color: #000000 
  @onCheckChange: NPCTrade.setItem(self)

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

  Label
    id: nameLabel
    phantom: true
    anchors.top: prev.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    text-auto-resize: true
    margin-top: 5

  Label
    id: weightLabel
    phantom: true
    anchors.top: prev.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    text-auto-resize: true
    margin-top: 5

  Label
    id: priceLabel
    phantom: true
    anchors.top: prev.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    text-auto-resize: true
    margin-top: 5

  $checked:    
    border-color: #FFFFFF 

  $hover !checked:
    border-color: #AAAAAA  

MainWindow
  id: npcWindow
  !text: tr('NPC Trade')
  size: 550 550

  @onEscape: NPCTrade.hide()

  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

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

  TextEdit
    id: searchText
    width: 200
    anchors.left: prev.right
    anchors.top: prev.top
    margin-top: -2
    margin-left: 5
    @onTextChange: NPCTrade.refreshFilters()

  NPCPanel
    height: 250
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 5 

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

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

  FlatPanel
    id: setupPanel
    height: 150
    enabled: false
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.top: prev.bottom
    margin-top: 5

    Label
      id: quantityLabel
      !text: tr('Quantity:')
      anchors.left: parent.left
      anchors.top: parent.top
      text-auto-resize: true
      margin-top: 5
      margin-left: 2

    NPCOfferLabel
      id: quantity

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

    Label
      id: nameLabel
      !text: tr('Name:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 2
      width: 64

    NPCOfferLabel
      id: name

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

    NPCOfferLabel
      id: price

    Label
      id: moneyLabel
      !text: tr('Money:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 2
      width: 64

    NPCOfferLabel
      id: money

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

    NPCOfferLabel
      id: weight

    Label
      id: capacityLabel
      !text: tr('Capacity:')
      anchors.left: parent.left
      anchors.top: prev.bottom
      margin-top: 5
      margin-left: 2
      width: 64

    NPCOfferLabel
      id: capacity

    Button
      id: setupButton
      !text: tr('Buy')
      width: 64
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: prev.bottom
      @onClick: NPCTrade.setupButton()

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