.segment.lg-three-quarter.float-left.bg-color-heading
  .logo.segment.lg-auto.float-left
    solid-link(next='dashboard')
      img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '52px'}`)
    
  span.tag.reversed.color-primary.text-semibold(data-trans='header.beta')

.segment.lg-quarter.float-left.bg-color-third
  .segment.bg-color-primary
    solid-notifications.notLoggedIn(
      nested-field="inbox"
      bind-user
    )

  .segment.lg-auto
    details#user-controls.notLoggedIn
      summary.segment.padding(tabindex='0' role='button')
        solid-display#user-controls__profile.user-thumb(
          fields='account.picture, content(name-and-icon(first_name, button))'
          class-account.picture='user-thumb-avatar user-thumb-avatar__size'
          class-content='user-thumb-content'
          class-name-and-icon='user-thumb-content__name-and-icon'
          class-first_name='name'
          class-button='icon icon-arrow-down'
          widget-account.picture='hubl-user-avatar'
          bind-user
        )
      #user-controls__panel
        nav.bg-color-white.text-semibold.text-color-heading
          ul
            if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
              li.border-bottom.border-color-grey
                solid-link.segment.padding-small.text-hover(next='profile' data-trans='header.myProfile')
            li.segment.padding-small.border-bottom.border-color-grey
              div(data-trans='header.admin')
              ul.text-normal
                if (endpoints.users || (endpoints.get && endpoints.get.users))
                  solid-route.text-hover(name='admin-communities')
                    li.segment.padding-top-small
                      a.icon.icon-people.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.community')
                if endpoints.circles || (endpoints.get && endpoints.get.circles)
                  solid-route.text-hover(name='admin-circles')
                    li.segment.padding-top-small
                      a.icon.icon-globe.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.circles')
                if endpoints.projects || (endpoints.get && endpoints.get.projects)
                  solid-route.text-hover(name='admin-projects')
                    li.segment.padding-top-small
                      a.icon.icon-folder-alt.icon-third.icon-small.margin-right-xsmall(data-trans='admin.menuRight.projects')
            li.border-bottom.border-color-grey
              solid-link.segment.padding-small.text-hover(next='about' data-trans='header.about')
            li
              button.segment.padding-small.text-hover.text-bold.text-color-heading(role='log out' onclick="document.querySelector('sib-auth').logout();" data-trans='header.logOut')

  button.loggedIn.segment.float-right(role='log in' onclick="document.querySelector('sib-auth').login();" data-trans='header.logIn')

  button.notLoggedIn.segment.lg-hidden.icon-menu#toggleMainMenu

  sib-auth(style='display:none!important')
    sib-auth-provider(
      data-authority=`${authority}`
      data-id=`${authorityName || "authority"}`
      data-client-name=`${clientName || "Hubl"}`
    )