// OT-MMO (22-oct): «Crear cuenta» con los componentes base, misma familia que «Iniciar sesión».
// Columna única con layout vertical (fit-children): el alto sale del contenido, no se ajusta a mano.
// Solo email y contraseña; «Siguiente» abre la pantalla de crear personaje (crearPersonaje.lua).
Requisito < UIWidget
  height: 16
  margin-top: 4

  UIWidget
    id: punto
    size: 6 6
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 2
    background-color: $otmmo-border
    phantom: true

  Label
    id: texto
    anchors.left: punto.right
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    margin-left: 8
    color: $otmmo-text-2
    phantom: true

MainWindow
  id: crearCuenta
  !text: tr('Crear cuenta')
  width: 352
  layout:
    type: verticalBox
    fit-children: true
  @onEscape: toggleCreateAccount(true)
  @onEnter: onClickStartPlaying()

  FieldLabel
    !text: tr('Email')

  GameInput
    id: email
    margin-top: 4
    max-length: 254

  FieldError
    id: emailError
    visible: false
    margin-top: 4

  FieldLabel
    !text: tr('Contraseña')
    margin-top: 12

  GamePasswordInput
    id: password
    margin-top: 4
    max-length: 64

  UIWidget
    id: requisitos
    margin-top: 4
    layout:
      type: verticalBox
      fit-children: true

    Requisito
      id: PasswordLength
      &etiqueta: 'Entre 8 y 64 caracteres'
    Requisito
      id: HasLowerCase
      &etiqueta: 'Una minúscula (a-z)'
    Requisito
      id: HasUpperCase
      &etiqueta: 'Una mayúscula (A-Z)'
    Requisito
      id: HasNumber
      &etiqueta: 'Un número (0-9)'
    Requisito
      id: InvalidCharacters
      &etiqueta: 'Sin espacios ni acentos'

  FieldLabel
    !text: tr('Repite la contraseña')
    margin-top: 12

  GamePasswordInput
    id: repetir
    margin-top: 4
    max-length: 64

  FieldError
    id: repetirError
    visible: false
    margin-top: 4

  CheckBox
    id: reglas
    !text: tr('Acepto las reglas del servidor')
    height: 16
    margin-top: 16

  PrimaryButton
    id: siguiente
    !text: tr('Siguiente')
    height: 32
    margin-top: 16
    ttf-font-size: $otmmo-size-md
    enabled: false
    @onClick: onClickStartPlaying()

  HorizontalSeparator
    margin-top: 16

  Button
    id: volver
    !text: tr('Ya tengo cuenta')
    height: 28
    margin-top: 16
    @onClick: toggleCreateAccount(true)