template(name="header")
  //-
    If the user is connected we display a small "quick-access" top bar that
    list all starred boards with a link to go there. This is inspired by the
    Reddit "subreddit" bar.
    The first link goes to the boards page.
  if currentUser
    #header-quick-access(class="currentBoard.colorClass {{#if isMiniScreen}}mobile-view{{/if}}")
      // Home icon - always at left side of logo
      #header-quick-access-left
        span.home-icon.allBoards
          a(href="{{pathFor 'home'}}")
            span.emoji-icon
              i.fa.fa-home
            span
              | {{_ 'all-boards'}}

        if isMiniScreen
          ul.header-quick-access-list
            if currentList
              each currentBoard.lists
                li(class="{{#if $.Session.equals 'currentList' _id}}current{{/if}}")
                  a.js-select-list.
                    +viewer
                      = title
            else
              each currentUser.starredBoards
                li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
                  a(href="{{pathFor 'board' id=_id slug=slug}}")
                    +viewer
                      = title
        else
          ul.header-quick-access-list
            //li
            //  a(href="{{pathFor 'public'}}")
            //    span.fa.fa-globe
            //    | {{_ 'public'}}
            each currentUser.starredBoards
              li(class="{{#if $.Session.equals 'currentBoard' _id}}current{{/if}}")
                a(href="{{pathFor 'board' id=_id slug=slug}}")
                  +viewer
                    = title
            else
              li.current.empty(title="{{_ 'quick-access-description'}}")
              | {{_ 'quick-access-description'}}
          #header-new-board-icon
        // Next line is used only for spacing at header,
        // there is no visible clickable icon.
        #header-new-board-icon
        //  Hide duplicate create board button,
        //  because it did not show board templates correctly.
        //a#header-new-board-icon.js-create-board
        //  i.fa.fa-plus(title="Create a new board")
      // Logo - visible; on mobile constrained by CSS
      unless currentSetting.hideLogo
        .logo-container
          if currentSetting.customTopLeftCornerLogoImageUrl
            if currentSetting.customTopLeftCornerLogoLinkUrl
              a.logo(href="{{currentSetting.customTopLeftCornerLogoLinkUrl}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")
                +logo
            else
              +logo
          else
            div#headerIsSettingDatabaseCallDone.logo
              img(src="{{pathFor '/logo-header.png'}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")

      #header-quick-access-right
        if currentSetting.customHelpLinkUrl
          #header-help
            a(href="{{currentSetting.customHelpLinkUrl}}", title="{{_ 'help'}}", target="_blank", rel="noopener noreferrer")
              i.fa.fa-question-circle
        #header-quick-access-icons
          +headerUserBar
          // Notifications
          +notifications

  #header(class=currentBoard.colorClass)
    //-
      The main bar is a colorful bar that provide all the meta-data for the
      current page. This bar is contextual based.
      If the user is not connected we display "sign in" and "log in" buttons.
    #header-main-bar(class="{{#if isMiniScreen}}mobile-view{{/if}} {{#if wrappedHeader}}wrapper{{/if}}")
      +Template.dynamic(template=headerBar)

  if appIsOffline
    +offlineWarning

  if currentUser.isBoardMember
    if hasAnnouncement
      .announcement
        p
          i.fa.fa-bullhorn
          +viewer
            | #{announcement}
          a
            .js-close-announcement
              i.fa.fa-times-thin

template(name="offlineWarning")
  .offline-warning
    p
      i.fa.fa-warning
      | {{_ 'app-is-offline'}}

      a.app-try-reconnect {{_ 'app-try-reconnect'}}

//- a little helper to avoid duplication
template(name="logo")
  img(src="{{currentSetting.customTopLeftCornerLogoImageUrl}}" style="{{#if currentSetting.customTopLeftCornerLogoHeight}}min-height: #{currentSetting.customTopLeftCornerLogoHeight};{{/if}}" alt="{{currentSetting.productName}}" title="{{currentSetting.productName}}")