NextOutfitButton < NextButton
PrevOutfitButton < PreviousButton
NextMountButton < NextButton
PrevMountButton < PreviousButton

OutfitSelectorPanel < Panel
  size: 125 120
  
  Label
    id: title
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    text-align: center

  UICreature
    id: creature
    size: 100 80
    anchors.top: prev.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 1
  
  PreviousButton  
    id: prevButton
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    
  NextButton
    id: nextButton
    anchors.right: parent.right
    anchors.bottom: parent.bottom
  
  Label
    id: label
    text: Outfit name
    text-align: center
    anchors.left: prevButton.right
    anchors.right: nextButton.left
    anchors.top: prevButton.top
    anchors.bottom: parent.bottom
    margin-left: 2
    margin-right: 2
    image-source: /images/ui/panel_flat
    image-border: 2    
    text: -

BarSelectorPanel < Panel
  size: 125 120
  
  Label
    id: title
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    text-align: center

  UIWidget
    id: bar
    anchors.centerIn: parent
  
  PreviousButton  
    id: prevButton
    anchors.left: parent.left
    anchors.bottom: parent.bottom
    
  NextButton
    id: nextButton
    anchors.right: parent.right
    anchors.bottom: parent.bottom
  
  Label
    id: label
    text: -
    text-align: center
    anchors.left: prevButton.right
    anchors.right: nextButton.left
    anchors.top: prevButton.top
    anchors.bottom: parent.bottom
    margin-left: 2
    margin-right: 2
    image-source: /images/ui/panel_flat
    image-border: 2    

MainWindow
  !text: tr('Select Outfit')
  size: 560 330

  @onEnter: modules.game_outfit.accept()
  @onEscape: modules.game_outfit.destroy()

  // Creature Boxes

  Panel
    id: line1
    anchors.top: outfit.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    backgroud: red
    layout:
      type: horizontalBox
      spacing: 3

  OutfitSelectorPanel    
    id: type
    anchors.left: parent.left
    anchors.top: parent.top
    
  CheckBox
    id: addon1
    width: 80
    anchors.top: type.bottom
    anchors.left: type.left
    !text: tr('Addon 1')
    margin-left: 2
    margin-top: 5
    enabled: false

  CheckBox
    id: addon2
    width: 80
    anchors.top: prev.top
    anchors.left: prev.right
    !text: tr('Addon 2')
    enabled: false

  CheckBox
    id: addon3
    width: 80
    anchors.top: prev.top
    anchors.left: prev.right
    !text: tr('Addon 3')
    enabled: false
    
  ButtonBox
    id: head
    !text: tr('Head')
    anchors.top: type.top
    anchors.left: type.right
    margin-left: 5
    checked: true
    width: 76

  ButtonBox
    id: primary
    !text: tr('Primary')
    anchors.top: prev.bottom
    anchors.left: prev.left
    margin-top: 2
    width: 76

  ButtonBox
    id: secondary
    !text: tr('Secondary')
    anchors.top: prev.bottom
    anchors.left: prev.left
    margin-top: 2
    width: 76

  ButtonBox
    id: detail
    !text: tr('Detail')
    anchors.top: prev.bottom
    anchors.left: prev.left
    margin-top: 2
    width: 76    

  ButtonBox
    id: randomizeButton
    !text: tr('Randomize')
    anchors.top: prev.bottom
    !tooltip: tr('Randomize characters outfit')
    anchors.left: prev.left
    margin-top: 2
    width: 76    
    @onClick: modules.game_outfit.randomize()

  Panel
    id: colorBoxPanel
    anchors.top: head.top
    anchors.left: head.right
    anchors.right: parent.right
    anchors.bottom: type.bottom
    margin-left: 5
    margin-top: 2
    layout:
      type: grid
      cell-size: 15 15
      cell-spacing: 2
      num-columns: 19
      num-lines: 7
    
  Panel
    id: extensions
    height: 120
    margin-top: 5
    anchors.top: addon1.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    backgroud: red
    layout:
      type: horizontalBox
      fit-children: true
      spacing: 8

  Button
    id: outfitOkButton
    !text: tr('Ok')
    width: 64
    anchors.right: next.left
    anchors.bottom: parent.bottom
    margin-right: 16
    @onClick: modules.game_outfit.accept()

  Button
    id: outfitCancelButton
    !text: tr('Cancel')
    width: 64
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    @onClick: modules.game_outfit.destroy()