ColorFirst < UIWidget
  id: color
  margin.left: 20
  anchors.top: creature.top
  anchors.left: creature.right

Color < ColorBox
  anchors.top: color.top
  anchors.left: color.right

Window
  title: Select Outfit
  size: 450 280

  anchors.horizontalCenter: parent.horizontalCenter
  anchors.verticalCenter: parent.verticalCenter

  onEnter: Outfit.accept()
  onEscape: Outfit.destroy()

  Label
    id: name
    text: Outfit Name
    width: 100
    anchors.top: parent.top
    anchors.left: parent.left
    margin.top: 34
    margin.left: 20

  Creature
    id: creature
    anchors.top: name.bottom
    anchors.left: name.left
    margin.top: 5

  Button
    @onClick: Outfit.nextType()
    text: >>
    width: 32
    margin.top: 3
    anchors.top: creature.bottom
    anchors.right: creature.right

  Button
    @onClick: Outfit.previousType()
    text: <<
    width: 32
    margin.top: 3
    anchors.top: creature.bottom
    anchors.left: creature.left

  CheckBox
    id: addon1
    text: Addon 1
    enabled: false
    margin.top: 10
    width: 100
    anchors.top: prev.bottom
    anchors.left: prev.left

  CheckBox
    id: addon2
    text: Addon 2
    enabled: false
    margin.top: 10
    width: 100
    anchors.top: prev.bottom
    anchors.left: prev.left

  CheckBox
    id: addon3
    text: Addon 3
    enabled: false
    margin.top: 10
    width: 100
    anchors.top: prev.bottom
    anchors.left: prev.left

  HorizontalSeparator
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: next.top
    margin.left: 16
    margin.right: 16
    margin.bottom: 10

  Button
    id: buttonOk
    text: Ok
    width: 64
    anchors.right: next.left
    anchors.bottom: parent.bottom
    margin.bottom: 16
    margin.right: 16
    @onClick: Outfit.accept()

  Button
    id: buttonCancel
    text: Cancel
    width: 64
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin.bottom: 16
    margin.right: 16
    @onClick: Outfit.destroy()