// OT-MMO: botín de jefe a dados (Necesidad, Codicia o Pasar), estilo WoW con la guía de diseño (tokens pizarra, Geist).
// Una tarjeta por pieza; BotinPila cubre el mapa (fantasma, sin layout) y game_botin.lua coloca cada tarjeta en medio,
// en el tercio inferior, sobre el estado.
BotinPila < UIWidget
  focusable: false
  phantom: true

// Ícono a 8 px del borde y texto detrás (el texto no respeta el padding: va con text-offset; los hijos sí, y el
// Button base trae padding 10, de ahí el margen de -2). Pulsado baja el texto 1 px como el Button base.
BotinBoton < Button
  size: 84 24
  text-align: left
  text-offset: 28 0

  $pressed !disabled:
    text-offset: 28 1

  UIWidget
    id: icono
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: -2
    size: 16 16
    image-color: $otmmo-text
    phantom: true

BotinFila < Panel
  height: 18
  phantom: true

  Label
    id: nombre
    anchors.left: parent.left
    anchors.right: eleccion.left
    anchors.verticalCenter: parent.verticalCenter
    margin-right: 8
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-auto-resize: false
    height: 16

  Label
    id: eleccion
    anchors.right: tirada.left
    anchors.verticalCenter: parent.verticalCenter
    margin-right: 8
    width: 76
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-auto-resize: false
    height: 16

  Label
    id: tirada
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    width: 64
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-align: right
    text-auto-resize: false
    height: 16

// Una pieza = una barra ancha de una sola fila (como el botín de grupo de WoW): baja (60 px) para que tres quepan
// apiladas entre el personaje y el estado también a 1366x768. [objeto | nombre y detalle | cuenta | botones].
BotinTirada < Panel
  width: 620
  height: 60
  background-color: $otmmo-bg-2
  border-width: 1
  border-color: $otmmo-border
  padding: 8 12

  UIItem
    id: item
    anchors.top: parent.top
    anchors.left: parent.left
    size: 32 32
    virtual: true
    image-source: /images/ui/rarity_frames
    image-clip: 0 0 32 32

  Panel
    id: botones
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 4
    size: 276 24

    BotinBoton
      id: necesidad
      anchors.top: parent.top
      anchors.left: parent.left
      width: 96
      text: Necesidad

    BotinBoton
      id: codicia
      anchors.top: parent.top
      anchors.left: necesidad.right
      margin-left: 8
      text: Codicia

    BotinBoton
      id: pasar
      anchors.top: parent.top
      anchors.right: parent.right
      text: Pasar

  Label
    id: estado
    anchors.top: botones.top
    anchors.left: botones.left
    anchors.right: botones.right
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-auto-resize: false
    height: 24
    text-align: right
    visible: false

  Label
    id: cuenta
    anchors.top: botones.top
    anchors.right: botones.left
    margin-right: 12
    width: 40
    ttf-font: $otmmo-font-num
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-align: right
    text-auto-resize: false
    height: 24

  Label
    id: nombre
    anchors.top: item.top
    anchors.left: item.right
    anchors.right: cuenta.left
    margin-left: 12
    margin-right: 8
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    color: $otmmo-text
    text-auto-resize: false
    height: 16

  Label
    id: detalle
    anchors.top: nombre.bottom
    anchors.left: nombre.left
    margin-top: 2
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-auto-resize: true
    height: 16

  // Por qué no hay Necesidad: en la misma línea que el detalle, para no crecer en alto.
  Label
    id: motivo
    anchors.top: detalle.top
    anchors.left: detalle.right
    anchors.right: cuenta.left
    margin-left: 8
    margin-right: 8
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    color: $otmmo-text-2
    text-auto-resize: false
    height: 16
    visible: false

  Panel
    id: filas
    anchors.top: item.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    margin-top: 8
    height: 18
    visible: false
    layout:
      type: verticalBox
      fit-children: true

  Panel
    id: barra
    anchors.bottom: parent.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    height: 3
    background-color: $otmmo-bg
    phantom: true

    Panel
      id: fill
      anchors.top: parent.top
      anchors.bottom: parent.bottom
      anchors.left: parent.left
      width: 596
      background-color: $otmmo-accent
      phantom: true