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

MainWindow
  !text: tr('Select Outfit')
  size: 338 375

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

  // Creature Boxes
  Creature
    id: outfitCreatureBox
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 15
    margin-left: 22
    padding: 4 4 4 4
    fixed-creature-size: true

  Label
    id: outfitName
    !text: tr('No Outfit')
    width: 115
    anchors.bottom: prev.top
    anchors.left: prev.left
    margin-bottom: 2

  NextOutfitButton
    id: outfitNextButton
    anchors.left: outfitCreatureBox.right
    anchors.verticalCenter: outfitCreatureBox.verticalCenter
    margin-left: 3
    enabled: true
    @onClick: modules.game_outfit.nextOutfitType()

  PrevOutfitButton
    id: outfitPrevButton
    anchors.right: outfitCreatureBox.left
    anchors.verticalCenter: outfitCreatureBox.verticalCenter
    margin-right: 3
    enabled: true
    @onClick: modules.game_outfit.previousOutfitType()

  Creature
    id: mountCreatureBox
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 15
    margin-right: 22
    padding: 4 4 4 4
    fixed-creature-size: true

  Label
    id: mountName
    !text: tr('No Mount')
    width: 115
    anchors.bottom: prev.top
    anchors.left: prev.left
    margin-bottom: 2

  NextMountButton
    id: mountNextButton
    anchors.left: mountCreatureBox.right
    anchors.verticalCenter: mountCreatureBox.verticalCenter
    margin-left: 3
    enabled: true
    @onClick: modules.game_outfit.nextMountType()

  PrevMountButton
    id: mountPrevButton
    anchors.right: mountCreatureBox.left
    anchors.verticalCenter: mountCreatureBox.verticalCenter
    margin-right: 3
    enabled: true
    @onClick: modules.game_outfit.previousMountType()

  // Addon Check Boxes

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

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

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

  // Body Selection Buttons

  ButtonBox
    id: head
    !text: tr('Head')
    anchors.top: addon1.bottom
    anchors.left: addon1.left
    margin-top: 5
    checked: true
    width: 76

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

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

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

  // Color Panel

  Panel
    id: colorBoxPanel
    anchors.top: head.bottom
    anchors.left: head.left
    margin-top: 3
    margin-right: 20
    width: 302
    height: 119
    layout:
      type: grid
      cell-size: 14 14
      cell-spacing: 2
      num-columns: 19
      num-lines: 7

  // Action Button Section

  Button
    id: randomizeButton
    !text: tr('Randomize')
    !tooltip: tr('Randomize characters outfit')
    width: 75
    anchors.left: prev.left
    anchors.top: prev.bottom
    margin-right: 16
    @onClick: modules.game_outfit.randomize()

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

  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()