include ../user/components/profile-icon

nav(uk-navbar).uk-navbar-container.uk-position-fixed.uk-position-top
  .uk-navbar-left
    .uk-navbar-item
      button(type="button", uk-toggle="target: #dtp-offcanvas").uk-button.uk-button-link.uk-padding-small
        i.fas.fa-bars

  div(class="uk-visible@m").uk-navbar-left
    //- Site icon
    a(href="/").uk-navbar-item
      img(src=`/img/icon/${site.domainKey}/icon-36x36.png`)
    
    //- Site name
    ul.uk-navbar-nav
      li(class={ 'uk-active': currentView === 'home' })
        a(href="/", title= "Home")
          +renderButtonIcon('fa-home', 'Home')
      li(class={ 'uk-active': currentView === 'chat' })
        a(href="/chat", title= "chat")
          +renderButtonIcon('fa-comment-alt', 'Chat')

      if site.shingWidgetKey && site.shingChannelSlug
        li(class={ 'uk-active': currentView === 'venue' })
          a(href="/venue", title= "Live")
            span
              img(src="https://shing.tv/img/icon/shing.tv/icon-32x32.png")
            span(class="uk-visible@m").uk-margin-small-left Live

      each menuItem in mainMenu
        li(class={ 'uk-active': (pageSlug === menuItem.slug) })
          a(href= menuItem.url, title= menuItem.label)
            +renderButtonIcon(menuItem.icon || 'fa-file', menuItem.label)

  div(class="uk-hidden@m").uk-navbar-center
    //- Site name
    ul.uk-navbar-nav
      li
        a(href="/").uk-navbar-item
          img(src=`/img/icon/${site.domainKey}/icon-36x36.png`)
      each menuItem in mainMenu
        li
          a(href= menuItem.url, title= menuItem.label)= menuItem.label

  .uk-navbar-right
    if user
      ul.uk-navbar-nav
        li(class={ 'uk-active': currentView === 'notification' })
          a(href="/notification", title="Notifications")
            .uk-position-relative
              i.fas.fa-bell.uk-text-large
              if middleware.notifications.newCount > 0
                span(style="top: -11px; right: -15px; padding: 0 3px; border-radius: 4px; background-color: #ff0013; color: #e8e8e8;").uk-position-absolute= formatCount(middleware.notifications.newCount)

    .uk-navbar-item
      if user
        div.no-select
          +renderProfileIcon(user, `${user.displayName || user.username}'s Menu`, 'navbar')

        div(uk-dropdown={ mode: 'click' }).uk-navbar-dropdown
          ul.uk-nav.uk-navbar-dropdown-nav
            li.uk-nav-heading.uk-text-center= user.displayName || user.username
            li.uk-nav-divider
            li
              a(href= user.core ? `/user/core/${user._id}` : `/user/${user._id}`)
                span.nav-item-icon
                  i.fas.fa-user
                span Profile
            li
              a(href= user.core ? `/user/core/${user._id}/settings` : `/user/${user._id}/settings`)
                span.nav-item-icon
                  i.fas.fa-cog
                span Settings

            if user.flags && user.flags.isAdmin
              li.uk-nav-divider
              li
                a(href='/admin')
                  span.nav-item-icon
                    i.fas.fa-user-lock
                  span Admin

            li.uk-nav-divider

            li
              a(href='/auth/logout')
                span.nav-item-icon
                  i.fas.fa-sign-out-alt
                span Logout
      else
        ul.uk-navbar-nav
          li
            a(href='/welcome').uk-button.uk-button-link
              span.nav-item-icon
                i.fas.fa-sign-in-alt
              span(class="uk-visible@m").uk-margin-small-left GET STARTED!