// OT-MMO: ventana de gremio (G). Arriba el salón del gremio (PixelLab) con el nombre; con gremio, dos pestañas
// (Miembros, Rangos) y el pie con el canal y «Salir»; sin gremio, cómo fundar uno y las invitaciones recibidas.
ValdrenVentana
  id: ventanaGremio
  size: 720 640
  text: Gremio
  @onEscape: modules.game_gremio.toggle()

  // El salón de los gremios de la Ciudad Alta (game_gremio/images/salon.png, PixelLab).
  ValdrenArte
    id: arte
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 124
    image-source: /game_gremio/images/salon
    image-clip: 0 22 320 59

  ValdrenVelo
    id: velo
    anchors.left: arte.left
    anchors.right: arte.right
    anchors.bottom: arte.bottom
    margin: 1
    height: 52

  ValdrenTitulo
    id: nombre
    anchors.left: velo.left
    anchors.top: velo.top
    margin-left: 14
    margin-top: 3
    ttf-font-size: 22

  Label
    id: lema
    anchors.left: nombre.left
    anchors.top: nombre.bottom
    margin-top: 1
    ttf-font: $otmmo-font
    ttf-font-size: $otmmo-size-sm
    ttf-stroke: 1 #10161C
    color: #E8D3A2
    text-auto-resize: true
    phantom: true

  // Mi rango, a la derecha de la franja.
  GrIcono
    id: miIcono
    anchors.right: miRango.left
    anchors.verticalCenter: velo.verticalCenter
    margin-right: 6

  Label
    id: miRango
    anchors.right: velo.right
    anchors.verticalCenter: velo.verticalCenter
    margin-right: 14
    ttf-font: $otmmo-font-strong
    ttf-font-size: $otmmo-size-md
    ttf-stroke: 1 #10161C
    color: #E8D3A2
    text-auto-resize: true
    phantom: true

  // ---- Con gremio --------------------------------------------------------------------------------------------------
  Panel
    id: conGremio
    anchors.top: arte.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    visible: false

    Panel
      id: pestanas
      anchors.top: parent.top
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 12
      height: 24
      layout:
        type: horizontalBox
        spacing: 4

    // -- Miembros
    Panel
      id: miembros
      anchors.top: pestanas.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: pie.top
      margin-top: 12
      margin-bottom: 12

      // Invitar (solo con permiso)
      GameInput
        id: invitarNombre
        anchors.top: parent.top
        anchors.left: parent.left
        width: 238
        height: 30
        max-length: 29
        placeholder: Nombre del personaje
        @onEnterPressed: modules.game_gremio.invitar()

      Button
        id: invitar
        anchors.left: invitarNombre.right
        anchors.verticalCenter: invitarNombre.verticalCenter
        margin-left: 6
        size: 76 30
        text: Invitar
        @onClick: modules.game_gremio.invitar()

      // Cabeceras de la lista
      Panel
        id: cabeza
        anchors.top: invitarNombre.bottom
        anchors.left: parent.left
        margin-top: 10
        size: 432 18

        GrColumna
          anchors.left: parent.left
          anchors.verticalCenter: parent.verticalCenter
          margin-left: 52
          text: Personaje
        GrColumna
          anchors.right: parent.left
          anchors.verticalCenter: parent.verticalCenter
          margin-right: -240
          text: Nivel
        GrColumna
          anchors.left: parent.left
          anchors.verticalCenter: parent.verticalCenter
          margin-left: 270
          text: Clase
        GrColumna
          anchors.left: parent.left
          anchors.verticalCenter: parent.verticalCenter
          margin-left: 358
          text: Rango

      UIWidget
        id: listaMarco
        anchors.top: cabeza.bottom
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        width: 432
        margin-top: 4
        background-color: $otmmo-bg
        border-width: 1
        border-color: $otmmo-border

      ScrollablePanel
        id: lista
        anchors.top: listaMarco.top
        anchors.left: listaMarco.left
        anchors.right: scroll.left
        anchors.bottom: listaMarco.bottom
        margin: 1
        vertical-scrollbar: scroll
        layout:
          type: verticalBox

      VerticalScrollBar
        id: scroll
        anchors.top: listaMarco.top
        anchors.right: listaMarco.right
        anchors.bottom: listaMarco.bottom
        margin: 1
        step: 30
        pixels-scroll: true

      // Columna derecha: carta y miembro elegido
      Panel
        id: lado
        anchors.top: parent.top
        anchors.left: listaMarco.right
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        margin-left: 18

        GrIcono
          id: cartaIcono
          anchors.top: parent.top
          anchors.left: parent.left
          image-source: /game_gremio/images/carta

        GameSection
          id: tCarta
          anchors.left: cartaIcono.right
          anchors.verticalCenter: cartaIcono.verticalCenter
          margin-left: 6
          text: Carta del gremio

        Label
          id: editarCarta
          anchors.right: parent.right
          anchors.verticalCenter: cartaIcono.verticalCenter
          ttf-font: $otmmo-font-strong
          ttf-font-size: $otmmo-size-xs
          color: $otmmo-accent
          text: Escribir
          text-auto-resize: true
          phantom: false
          change-cursor-image: true
          cursor: pointer
          @onClick: modules.game_gremio.editarCarta()
          $hover:
            color: #E8D3A2

        UIWidget
          id: cartaMarco
          anchors.top: cartaIcono.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 8
          height: 112
          background-color: #1B1610
          border-width: 1
          border-color: #6E5B37

        Label
          id: carta
          anchors.top: cartaMarco.top
          anchors.left: cartaMarco.left
          anchors.right: cartaMarco.right
          margin: 10 12
          ttf-font: $otmmo-font
          ttf-font-size: $otmmo-size-sm
          color: #E8D3A2
          text-wrap: true
          text-vertical-auto-resize: true

        MultilineTextEdit
          id: cartaEdit
          anchors.fill: cartaMarco
          margin: 1
          padding: 8
          text-wrap: true
          max-length: 255
          visible: false

        Button
          id: guardarCarta
          anchors.top: cartaMarco.bottom
          anchors.right: parent.right
          margin-top: 6
          size: 84 24
          text: Guardar
          visible: false
          @onClick: modules.game_gremio.guardarCarta()

        Button
          id: cancelarCarta
          anchors.top: guardarCarta.top
          anchors.right: guardarCarta.left
          margin-right: 6
          size: 84 24
          text: Cancelar
          visible: false
          @onClick: modules.game_gremio.cancelarCarta()

        GameDivider
          id: raya
          anchors.top: cartaMarco.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 38

        // Miembro elegido
        GrIcono
          id: elegidoIcono
          anchors.top: raya.bottom
          anchors.left: parent.left
          margin-top: 14

        Label
          id: elegido
          anchors.left: elegidoIcono.right
          anchors.right: parent.right
          anchors.verticalCenter: elegidoIcono.verticalCenter
          margin-left: 6
          ttf-font: $otmmo-font-strong
          ttf-font-size: $otmmo-size-md
          color: $otmmo-text

        Label
          id: elegidoMeta
          anchors.top: elegidoIcono.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          margin-top: 6
          ttf-font: $otmmo-font
          ttf-font-size: $otmmo-size-xs
          color: $otmmo-text-2
          text-wrap: true
          text-vertical-auto-resize: true

        Panel
          id: acciones
          anchors.top: elegidoMeta.bottom
          anchors.left: parent.left
          anchors.right: parent.right
          anchors.bottom: parent.bottom
          margin-top: 10
          layout:
            type: verticalBox
            spacing: 4

    // -- Rangos
    Panel
      id: rangos
      anchors.top: pestanas.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: pie.top
      margin-top: 12
      margin-bottom: 12
      visible: false

      GameParagraph
        id: rangosNota
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        text-wrap: true
        text-vertical-auto-resize: true

      Panel
        id: rangosLista
        anchors.top: rangosNota.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        margin-top: 14
        layout:
          type: verticalBox
          spacing: 6

    // -- Pie: canal, aviso y salir
    Panel
      id: pie
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      height: 32

      Button
        id: canal
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        size: 172 30
        text: Canal del gremio
        icon: /game_gremio/images/canal
        icon-offset: 12 5
        icon-size: 20 20
        text-offset: 12 0
        @onClick: modules.game_gremio.abrirCanal()

      Label
        id: aviso
        anchors.left: canal.right
        anchors.right: salir.left
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 14
        margin-right: 14
        text-align: center
        ttf-font: $otmmo-font
        ttf-font-size: $otmmo-size-sm
        color: $otmmo-text-2

      Button
        id: salir
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        size: 148 30
        text: Salir del gremio
        @onClick: modules.game_gremio.salir()

  // ---- Sin gremio --------------------------------------------------------------------------------------------------
  Panel
    id: sinGremio
    anchors.top: arte.bottom
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    visible: false

    GameParagraph
      id: comoFundar
      anchors.top: parent.top
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 16
      text-wrap: true
      text-vertical-auto-resize: true

    GameSection
      id: tInvitaciones
      anchors.top: comoFundar.bottom
      anchors.left: parent.left
      margin-top: 22
      text: Invitaciones

    Panel
      id: invitaciones
      anchors.top: tInvitaciones.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: avisoSin.top
      margin-top: 8
      layout:
        type: verticalBox
        spacing: 6

    Label
      id: avisoSin
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      height: 20
      text-align: center
      ttf-font: $otmmo-font
      ttf-font-size: $otmmo-size-sm
      color: $otmmo-text-2