TopPanel
  id: topMenu
  anchors.top: parent.top
  anchors.left: parent.left
  anchors.right: parent.right
  focusable: false

  TopButton
    id: settingsButton
    anchors.top: parent.top
    anchors.left: parent.left
    margin.top: 4
    margin.left: 6
    tooltip: Options
    @onClick: Options.create()

    UIWidget
      size: 16 16
      image: /core_styles/icons/settings.png
      anchors.centerIn: parent
      phantom: true

  TopButton
    anchors.top: prev.top
    anchors.left: prev.right
    margin.left: 6
    tooltip: Enter game with a character
    @onClick: |
      if Game.isOnline() then
        CharacterList.show()
      else
        EnterGame.show()
      end

    UIWidget
      size: 16 16
      image: /core_styles/icons/login.png
      anchors.centerIn: parent
      phantom: true

  TopButton
    anchors.top: parent.top
    anchors.right: parent.right
    margin.top: 4
    margin.right: 6
    tooltip: Logout
    @onClick: |
      if Game.isOnline() then
        Game.logout(false)
      else
        exit()
      end

    UIWidget
      size: 16 16
      image: /core_styles/icons/logout.png
      anchors.centerIn: parent
      phantom: true

  TopButton
    anchors.top: parent.top
    anchors.right: prev.left
    margin.top: 4
    margin.right: 6
    tooltip: About OTClient
    @onClick: About.create()

    UIWidget
      size: 16 16
      image: /core_styles/icons/about.png
      anchors.centerIn: parent
      phantom: true

  FrameCounter
    anchors.top: parent.top
    anchors.right: prev.left
    margin.top: 8
    margin.right: 12