Window
  !text: tr('Select Outfit')
  size: 550 280
  padding: 0 0 0 0

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

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

  Label
    id: outfitName
    !text: tr('Outfit Name')
    width: 100
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 34
    margin-left: 20

  Creature
    id: outfitCreatureBox
    anchors.top: outfitName.bottom
    anchors.left: outfitName.left
    margin-top: 5
    padding: 4 4 4 4
    fixed-creature-size: true

  Panel
    id: colorBoxPanel
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 54
    margin-right: 20
    width: 323
    height: 119
    layout:
      type: grid
      cell-size: 16 16
      cell-spacing: 2
      num-columns: 19
      num-lines: 7

  ButtonBox
    id: head
    !text: tr('Head')
    anchors.top: outfitCreatureBox.top
    anchors.left: outfitCreatureBox.right
    margin-left: 10
    checked: true
    width: 90

  ButtonBox
    id: primary
    !text: tr('Primary')
    anchors.top: prev.bottom
    anchors.left: prev.left
    width: 90

  ButtonBox
    id: secondary
    !text: tr('Secondary')
    anchors.top: prev.bottom
    anchors.left: prev.left
    width: 90

  ButtonBox
    id: detail
    !text: tr('Detail')
    anchors.top: prev.bottom
    anchors.left: prev.left
    width: 90

  Button
    id: outfitNextButton
    @onClick: Outfit.nextType()
    text: >>
    width: 32
    margin-top: 4
    anchors.top: outfitCreatureBox.bottom
    anchors.right: outfitCreatureBox.right

  Button
    id: outfitPreviousButton
    @onClick: Outfit.previousType()
    text: <<
    width: 32
    margin-top: 4
    anchors.top: outfitCreatureBox.bottom
    anchors.left: outfitCreatureBox.left

  CheckBox
    id: addon1
    !text: tr('Addon 1')
    enabled: false
    margin-top: 6
    width: 100
    anchors.top: prev.bottom
    anchors.left: prev.left

  CheckBox
    id: addon2
    !text: tr('Addon 2')
    enabled: false
    margin-top: 2
    width: 100
    anchors.top: prev.bottom
    anchors.left: prev.left

  CheckBox
    id: addon3
    !text: tr('Addon 3')
    enabled: false
    margin-top: 2
    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: outfitOkButton
    !text: tr('Ok')
    width: 64
    anchors.right: next.left
    anchors.bottom: parent.bottom
    margin-bottom: 16
    margin-right: 16
    @onClick: Outfit.accept()

  Button
    id: outfitCancelButton
    !text: tr('Cancel')
    width: 64
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-bottom: 16
    margin-right: 16
    @onClick: Outfit.destroy()