div.segment.lg-full.sm-full.padding-top-small.padding-right-large.padding-bottom-small.padding-left-large.sm-padding-xsmall.border-bottom.border-color-grey.whitespace-normal
  solid-display.labelled-avatar.small(
    bind-resources
    fields='segment1(account.picture), segment2(name, hyphen, at, username)'
    value-hyphen=" - "
    value-at="@"

    class-segment1='segment'
    class-account.picture='avatar small'
    
    class-segment2='segment margin-left-xsmall text-xxlarge text-letter-spacing-large whitespace-normal'
    class-name='text-color-heading text-uppercase text-semibold'
    class-hypen='text-color-heading'
    class-at=''
    class-username=''

    widget-account.picture='hubl-user-avatar'
  )

.chat-view.segment.lg-full.sm-full.whitespace-normal
  solid-xmpp-chat(
    data-authentication='login',
    data-auto-login='true',
    data-websocket-url=`${xmppWebsocket || 'wss://jabber.happy-dev.fr/xmpp-websocket'}`,
    data-i18n='en',
    bind-resources
  )