// OT-MMO: marcos de grupo estilo WoW. Los datos los manda el servidor (server/scripts/grupo.lua, opcode 105).
// La vida rellena el marco (hp, como el estado y el objetivo: el color es del estado, no de la clase); debajo, una
// línea de maná. La clase va en el símbolo de rol y en el tooltip.
MarcoMiembro < UIWidget
  size: 190 44
  background-color: #192127F2
  border-width: 1
  border-color: $otmmo-border
  $hover:
    border-color: $otmmo-border-hover

  UIWidget
    id: vida
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.bottom: mana.top
    margin: 1 0 0 1
    width: 1
    phantom: true

  UIWidget
    id: mana
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    margin: 0 0 1 1
    height: 4
    width: 1
    background-color: $otmmo-mana
    phantom: true

  UIWidget
    id: rol
    anchors.top: parent.top
    anchors.left: parent.left
    margin: 3 0 0 5
    size: 14 14
    text-align: center
    ttf-font: geistsemibold
    ttf-font-size: 11
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    phantom: true

  Label
    id: nombre
    anchors.top: parent.top
    anchors.left: rol.right
    anchors.right: parent.right
    margin: 3 4 0 4
    ttf-font: geistsemibold
    ttf-font-size: 12
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    phantom: true

  Label
    id: nivel
    anchors.bottom: mana.top
    anchors.left: parent.left
    margin: 0 4 2 5
    ttf-font: geistmono
    ttf-font-size: 11
    color: $otmmo-text
    text-auto-resize: true
    phantom: true

  Label
    id: pct
    anchors.bottom: mana.top
    anchors.right: parent.right
    margin: 0 4 2 0
    ttf-font: geistmono
    ttf-font-size: 11
    ttf-stroke: 1 #10161C
    color: $otmmo-text
    text-auto-resize: true
    phantom: true

UIWidget
  id: grupo
  anchors.top: parent.top
  anchors.left: parent.left
  margin-top: 120
  margin-left: 12
  size: 150 20
  visible: false
  focusable: false

  UIWidget
    id: cabecera
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 18
    background-color: #192127D9
    draggable: true
    !tooltip: tr('Arrastra para mover el grupo')

    Label
      id: titulo
      anchors.left: parent.left
      anchors.verticalCenter: parent.verticalCenter
      margin-left: 6
      text: Grupo
      ttf-font: geistsemibold
      ttf-font-size: 12
      color: $otmmo-text-2
      text-auto-resize: true
      phantom: true

    UIButton
      id: forma
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      margin-right: 24
      size: 56 14
      text-align: center
      ttf-font: geist
      ttf-font-size: 11
      color: $otmmo-text-2
      background-color: $otmmo-surface
      $hover:
        color: $otmmo-text
        background-color: $otmmo-surface-hover
      !tooltip: tr('Cambiar la forma: columna, fila o cuadrícula')
      @onClick: modules.game_grupo.cambiarForma()

    UIButton
      id: plegar
      anchors.right: parent.right
      anchors.verticalCenter: parent.verticalCenter
      size: 20 16
      text: -
      color: $otmmo-text
      background-color: $otmmo-surface
      tooltip: Plegar / desplegar grupo

  UIWidget
    id: lista
    anchors.top: cabecera.bottom
    anchors.left: parent.left
    margin-top: 2
    size: 190 44
    phantom: true