// OT-MMO: correo de la Liga del Puerto (opcode 150, server/scripts/correo/correo.lua). Mismo marco de hierro y oro que
// la carta de viaje (game_viaje/images/marco); a la izquierda la oficina de la Liga en pixel art y la bandeja, a la
// derecha la carta abierta o el borrador. Arte en images/ (PixelLab, ver CREDITOS.md). Oro #C7A86B.

CorreoCerrar < UIButton
  size: 22 22
  ttf-font: geistsemibold
  ttf-font-size: 15
  color: #C9D1D5
  text: X
  background-color: alpha

  $hover:
    color: #C7A86B

CorreoPestana < UIButton
  height: 28
  ttf-font: geistsemibold
  ttf-font-size: 13
  color: #9AA7AE
  background-color: alpha
  text-align: left
  text-auto-resize: true
  padding-left: 2
  padding-right: 2

  $hover !on:
    color: #E2E5E6

  $on:
    color: #E8D3A2

  UIWidget
    id: raya
    anchors.left: parent.left
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    height: 2
    background-color: #C7A86B
    phantom: true
    visible: false

CorreoEtiqueta < Label
  ttf-font: geist
  ttf-font-size: 11
  color: #9AA7AE
  text-auto-resize: true

CorreoCampo < TextEdit
  height: 26
  ttf-font: geist
  ttf-font-size: 13
  padding-left: 8
  text-offset: 0 5

CorreoBotonSec < UIButton
  height: 30
  ttf-font: geistsemibold
  ttf-font-size: 13
  color: #E8D3A2
  background-color: alpha
  border-width: 1
  border-color: #C7A86B80
  click-sound: 2774

  $hover !disabled:
    background-color: #C7A86B1F
    border-color: #C7A86B

  $pressed !disabled:
    text-offset: 0 1

  $disabled:
    color: #9AA7AE80
    border-color: #39444C

CorreoBotonTexto < UIButton
  height: 30
  ttf-font: geist
  ttf-font-size: 13
  color: #9AA7AE
  background-color: alpha
  text-auto-resize: true
  padding-left: 6
  padding-right: 6

  $hover !disabled:
    color: #DC6B6B

  $disabled:
    color: #9AA7AE60

// Casilla de adjunto: 44 x 44, el objeto en medio a 32. En el borrador recibe lo que se arrastra desde la mochila.
CorreoCasilla < UIItem
  size: 44 44
  virtual: true
  padding: 5
  background-color: #10161C
  border-width: 1
  border-color: #39444C
  item-visible: true
  ttf-font: geistmono
  ttf-font-size: 11

  $hover:
    border-color: #C7A86B

  $on:
    border-color: #C7A86B
    background-color: #C7A86B1A

// Fila de la bandeja: icono del sobre, quién, asunto, fecha y lo que trae.
CorreoFila < UIWidget
  height: 46
  focusable: false
  change-cursor-image: true
  cursor: pointer
  background-color: alpha
  border-width: 1
  border-color: alpha

  $hover !on:
    background-color: #E2E5E60D

  $on:
    background-color: #232C32
    border-color: #C7A86B

  UIWidget
    id: icono
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 6
    size: 32 32
    image-smooth: false
    phantom: true

  Label
    id: quien
    anchors.top: parent.top
    anchors.left: icono.right
    anchors.right: fecha.left
    margin-top: 6
    margin-left: 10
    margin-right: 6
    height: 16
    ttf-font: geistsemibold
    ttf-font-size: 13
    color: #E2E5E6
    phantom: true

  Label
    id: fecha
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 7
    margin-right: 8
    ttf-font: geistmono
    ttf-font-size: 11
    color: #9AA7AE
    text-auto-resize: true
    phantom: true

  Label
    id: asunto
    anchors.top: quien.bottom
    anchors.left: quien.left
    anchors.right: trae.left
    margin-top: 2
    margin-right: 6
    height: 15
    ttf-font: geist
    ttf-font-size: 12
    color: #9AA7AE
    phantom: true

  Label
    id: trae
    anchors.top: fecha.bottom
    anchors.right: parent.right
    margin-top: 3
    margin-right: 8
    ttf-font: geistmono
    ttf-font-size: 11
    color: #C7A86B
    text-auto-resize: true
    phantom: true

CorreoSeccion < Label
  height: 24
  ttf-font: geist
  ttf-font-size: 11
  color: #9AA7AE
  text-offset: 4 8
  phantom: true

UIWindow
  id: ventanaCorreo
  size: 880 612
  image-source: /game_viaje/images/marco
  image-border: 96
  image-smooth: false
  anchors.centerIn: parent
  @onEscape: modules.game_correo.cerrar()

  CorreoCerrar
    id: cerrar
    anchors.top: parent.top
    anchors.right: parent.right
    margin-top: 58
    margin-right: 64
    @onClick: modules.game_correo.cerrar()

  // -- izquierda: la oficina y la bandeja ------------------------------------------------------------------------
  UIWidget
    id: arte
    anchors.top: parent.top
    anchors.left: parent.left
    margin-top: 62
    margin-left: 62
    size: 320 120
    image-source: images/oficina
    image-clip: 0 30 320 120
    image-smooth: false
    border-width: 1
    border-color: #6E5B37
    phantom: true

  UIWidget
    id: velo
    anchors.left: arte.left
    anchors.right: arte.right
    anchors.bottom: arte.bottom
    margin-left: 1
    margin-right: 1
    margin-bottom: 1
    height: 42
    background-color: #10161C99
    phantom: true

  Label
    id: liga
    anchors.top: velo.top
    anchors.left: velo.left
    margin-top: 5
    margin-left: 10
    ttf-font: geist
    ttf-font-size: 11
    ttf-stroke: 1 #10161C
    color: #C7A86B
    text: Correo de la Liga del Puerto
    text-auto-resize: true
    phantom: true

  Label
    id: ciudad
    anchors.top: liga.bottom
    anchors.left: liga.left
    margin-top: 1
    ttf-font: geistsemibold
    ttf-font-size: 16
    ttf-stroke: 2 #10161C
    color: #E8D3A2
    text-auto-resize: true
    phantom: true

  CorreoPestana
    id: tabBandeja
    anchors.top: arte.bottom
    anchors.left: arte.left
    margin-top: 12
    text: Bandeja
    @onClick: modules.game_correo.verBandeja()

  Label
    id: cuentaBandeja
    anchors.verticalCenter: tabBandeja.verticalCenter
    anchors.left: tabBandeja.right
    margin-left: 4
    margin-top: -1
    ttf-font: geistmono
    ttf-font-size: 11
    color: #C7A86B
    text-auto-resize: true
    phantom: true

  CorreoPestana
    id: tabEscribir
    anchors.top: tabBandeja.top
    anchors.left: cuentaBandeja.right
    margin-left: 22
    text: Escribir carta
    @onClick: modules.game_correo.escribir()

  Label
    id: llevas
    anchors.verticalCenter: tabBandeja.verticalCenter
    anchors.right: arte.right
    ttf-font: geistmono
    ttf-font-size: 11
    color: #9AA7AE
    text-auto-resize: true
    phantom: true

  UIWidget
    id: fileteTabs
    anchors.top: tabBandeja.bottom
    anchors.left: arte.left
    anchors.right: arte.right
    height: 1
    background-color: #39444C
    phantom: true

  ScrollablePanel
    id: lista
    anchors.top: fileteTabs.bottom
    anchors.left: arte.left
    anchors.right: arte.right
    anchors.bottom: parent.bottom
    margin-top: 6
    margin-right: 10
    margin-bottom: 62
    vertical-scrollbar: barraLista
    layout:
      type: verticalBox
      spacing: 2

  VerticalScrollBar
    id: barraLista
    anchors.top: lista.top
    anchors.bottom: lista.bottom
    anchors.left: lista.right
    margin-left: 2
    width: 8
    step: 46
    pixels-scroll: true

  // Bandeja vacía: el sobre en sombra y una línea.
  UIWidget
    id: vacia
    anchors.top: fileteTabs.bottom
    anchors.horizontalCenter: arte.horizontalCenter
    margin-top: 70
    size: 64 64
    image-source: images/sobre
    image-smooth: false
    opacity: 0.35
    phantom: true

  Label
    id: vaciaTexto
    anchors.top: vacia.bottom
    anchors.horizontalCenter: vacia.horizontalCenter
    margin-top: 12
    ttf-font: geist
    ttf-font-size: 13
    color: #9AA7AE
    text: No tienes cartas.
    text-auto-resize: true
    phantom: true

  Label
    id: vaciaSub
    anchors.top: vaciaTexto.bottom
    anchors.horizontalCenter: vacia.horizontalCenter
    margin-top: 4
    ttf-font: geist
    ttf-font-size: 11
    color: #9AA7AE99
    text: Lo que te manden llega a cualquier buzón de la Liga.
    text-auto-resize: true
    phantom: true

  UIWidget
    id: columna
    anchors.top: parent.top
    anchors.left: arte.right
    anchors.right: parent.right
    anchors.bottom: parent.bottom
    margin-top: 62
    margin-left: 28
    margin-right: 70
    margin-bottom: 62
    phantom: true

  // -- derecha: carta abierta -----------------------------------------------------------------------------------
  UIWidget
    id: leer
    anchors.fill: columna
    visible: false

    CorreoEtiqueta
      id: tDe
      anchors.top: parent.top
      anchors.left: parent.left
      margin-top: 2
      color: #C7A86B
      text: De

    Label
      id: remitente
      anchors.top: tDe.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 1
      margin-right: 100
      height: 26
      ttf-font: geistsemibold
      ttf-font-size: 20
      color: #E8D3A2

    Label
      id: fecha
      anchors.top: tDe.top
      anchors.right: parent.right
      margin-right: 28
      ttf-font: geistmono
      ttf-font-size: 11
      color: #9AA7AE
      text-auto-resize: true

    Label
      id: asunto
      anchors.top: remitente.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 4
      margin-right: 90
      height: 20
      ttf-font: geistsemibold
      ttf-font-size: 15
      color: #E2E5E6

    Label
      id: devuelta
      anchors.verticalCenter: asunto.verticalCenter
      anchors.right: parent.right
      height: 20
      ttf-font: geistsemibold
      ttf-font-size: 11
      color: #D99A45
      border-width: 1
      border-color: #D99A4580
      padding-left: 6
      padding-right: 6
      text-auto-resize: true
      text: Devuelta
      visible: false

    UIWidget
      id: filete
      anchors.top: asunto.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 12
      height: 1
      background-color: #C7A86B80
      phantom: true

    Label
      id: cuerpo
      anchors.top: filete.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 14
      height: 178
      text-wrap: true
      text-align: topLeft
      ttf-font: geist
      ttf-font-size: 13
      color: #E2E5E6

    CorreoEtiqueta
      id: tAdj
      anchors.top: cuerpo.bottom
      anchors.left: parent.left
      margin-top: 10
      text: Adjuntos

    CorreoEtiqueta
      id: caduca
      anchors.top: tAdj.top
      anchors.right: parent.right

    UIWidget
      id: adjuntos
      anchors.top: tAdj.bottom
      anchors.left: parent.left
      margin-top: 6
      size: 294 44
      layout:
        type: horizontalBox
        spacing: 6

    UIWidget
      id: oro
      anchors.top: adjuntos.top
      anchors.left: adjuntos.right
      anchors.right: parent.right
      margin-left: 6
      height: 44
      background-color: #10161C
      border-width: 1
      border-color: #39444C
      change-cursor-image: true
      cursor: pointer

      $hover:
        border-color: #C7A86B

      $disabled:
        change-cursor-image: false
        border-color: #39444C

      UIWidget
        id: moneda
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 4
        size: 32 32
        image-source: images/monedas
        image-smooth: false
        phantom: true

      Label
        id: cantidad
        anchors.left: moneda.right
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 2
        margin-right: 6
        height: 16
        ttf-font: geistmono
        ttf-font-size: 13
        color: #E8D3A2
        text-align: right
        phantom: true

    CorreoEtiqueta
      id: pista
      anchors.top: adjuntos.bottom
      anchors.left: parent.left
      margin-top: 6
      color: #9AA7AE99

    ValdrenBoton
      id: recoger
      anchors.left: parent.left
      anchors.bottom: parent.bottom
      width: 180
      text: Recoger todo
      @onClick: modules.game_correo.recoger('todo')

    CorreoBotonSec
      id: devolver
      anchors.left: recoger.right
      anchors.bottom: parent.bottom
      margin-left: 10
      width: 120
      text: Devolver
      @onClick: modules.game_correo.devolver()

    CorreoBotonSec
      id: borrar
      anchors.left: parent.left
      anchors.bottom: parent.bottom
      width: 120
      text: Borrar
      @onClick: modules.game_correo.borrar()

  // -- derecha: escribir ----------------------------------------------------------------------------------------
  UIWidget
    id: escribirPanel
    anchors.fill: columna
    visible: false

    CorreoEtiqueta
      id: tPara
      anchors.top: parent.top
      anchors.left: parent.left
      text: Para

    CorreoCampo
      id: para
      anchors.top: tPara.bottom
      anchors.left: parent.left
      margin-top: 4
      width: 200
      max-length: 30

    Label
      id: paraEstado
      anchors.verticalCenter: para.verticalCenter
      anchors.left: para.right
      anchors.right: parent.right
      margin-left: 10
      margin-right: 30
      height: 30
      text-wrap: true
      ttf-font: geist
      ttf-font-size: 11
      color: #9AA7AE

    CorreoEtiqueta
      id: tAsunto
      anchors.top: para.bottom
      anchors.left: parent.left
      margin-top: 12
      text: Asunto

    CorreoCampo
      id: asunto
      anchors.top: tAsunto.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 4
      max-length: 40

    CorreoEtiqueta
      id: tCuerpo
      anchors.top: asunto.bottom
      anchors.left: parent.left
      margin-top: 12
      text: Carta

    CorreoEtiqueta
      id: cuentaCuerpo
      anchors.top: tCuerpo.top
      anchors.right: parent.right
      ttf-font: geistmono

    MultilineTextEdit
      id: cuerpo
      anchors.top: tCuerpo.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 4
      height: 124
      ttf-font: geist
      ttf-font-size: 13
      padding: 8
      text-wrap: true
      text-align: topLeft
      max-length: 600

    CorreoEtiqueta
      id: tAdjE
      anchors.top: cuerpo.bottom
      anchors.left: parent.left
      margin-top: 12
      text: Adjuntos

    CorreoEtiqueta
      id: tAdjPista
      anchors.top: tAdjE.top
      anchors.right: parent.right
      color: #9AA7AE99
      text: Arrastra hasta 6 objetos desde tu mochila

    UIWidget
      id: adjuntos
      anchors.top: tAdjE.bottom
      anchors.left: parent.left
      margin-top: 6
      size: 294 44
      layout:
        type: horizontalBox
        spacing: 6

    UIWidget
      id: oroCaja
      anchors.top: adjuntos.top
      anchors.left: adjuntos.right
      anchors.right: parent.right
      margin-left: 6
      height: 44
      background-color: #10161C
      border-width: 1
      border-color: #39444C

      UIWidget
        id: moneda
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 4
        size: 32 32
        image-source: images/monedas
        image-smooth: false
        phantom: true

      TextEdit
        id: oro
        anchors.left: moneda.right
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        margin-left: 2
        margin-right: 4
        height: 26
        ttf-font: geistmono
        ttf-font-size: 13
        text-align: right
        padding-right: 6
        text-offset: 0 5
        max-length: 8
        text: 0

    Label
      id: franqueo
      anchors.top: adjuntos.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      margin-top: 12
      height: 16
      ttf-font: geist
      ttf-font-size: 12
      color: #E2E5E6

    Label
      id: aviso
      anchors.top: franqueo.bottom
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: enviar.top
      margin-top: 4
      margin-bottom: 6
      text-wrap: true
      text-align: topLeft
      ttf-font: geist
      ttf-font-size: 11
      color: #DC6B6B

    ValdrenBoton
      id: enviar
      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      height: 34
      ttf-font-size: 14
      text: Enviar carta
      @onClick: modules.game_correo.mandar()

  // -- derecha: nada elegido --------------------------------------------------------------------------------------
  UIWidget
    id: nada
    anchors.fill: columna
    visible: false

    UIWidget
      id: sello
      anchors.horizontalCenter: parent.horizontalCenter
      anchors.top: parent.top
      margin-top: 130
      size: 64 64
      image-source: images/sello
      image-smooth: false
      phantom: true

    Label
      id: texto
      anchors.top: sello.bottom
      anchors.horizontalCenter: parent.horizontalCenter
      margin-top: 14
      ttf-font: geist
      ttf-font-size: 13
      color: #9AA7AE
      text-auto-resize: true
      text: Elige una carta de la bandeja o escribe una nueva.

  // Aviso pasajero (enviada, recogida, errores del servidor), sobre el pie de la columna derecha.
  Label
    id: mensaje
    anchors.left: columna.left
    anchors.right: columna.right
    anchors.bottom: columna.bottom
    margin-bottom: 42
    height: 32
    text-wrap: true
    text-align: bottomLeft
    ttf-font: geist
    ttf-font-size: 11
    color: #52A674
    phantom: true

// «Carta nueva»: debajo del cartel de zona, el mismo lenguaje que «Destino descubierto».
CartelCarta < UIWidget
  size: 520 112
  phantom: true
  focusable: false
  visible: false

  UIWidget
    id: sobre
    anchors.top: parent.top
    anchors.horizontalCenter: parent.horizontalCenter
    size: 64 64
    image-source: /game_correo/images/sobre
    image-smooth: false
    phantom: true

  Label
    id: etiqueta
    anchors.top: sobre.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 2
    ttf-font: geistsemibold
    ttf-font-size: 18
    ttf-stroke: 2 #10161C
    color: #E8D3A2
    text: Carta nueva
    text-auto-resize: true
    phantom: true

  Label
    id: sub
    anchors.top: etiqueta.bottom
    anchors.horizontalCenter: parent.horizontalCenter
    margin-top: 3
    ttf-font: geist
    ttf-font-size: 13
    ttf-stroke: 1 #10161C
    color: #C7A86B
    text-auto-resize: true
    phantom: true