header.Header
  .Header-container.Grid.u-flexAlignItemsCenter
    .Grid-cell.u-sizeFill
      .Header-banner.Grid.u-flexAlignItemsCenter
        a.Grid-cell.u-sizeFit.u-flexInline.u-flexAlignItemsCenter.u-textDecorationNone href=url_for(root_path)
          div.Header-bannerLogo
            img(class='logo' src='/media/benchcoach.svg' alt='BenchCoach Logo')
          span
            - if defined?(team)
              h1.Header-bannerTitle #{team.name}
            - else
                h1.Header-bannerTitle BenchCoach
        .Grid-cell.u-flexInline.u-flexJustifyEnd.u-sizeFill.u-padSidesSm
            - if @user
              .Popup
                .Button.Button--small.Popup-toggle onclick="this.closest('.Popup').querySelector('.Popup-container').classList.toggle('is-open')"
                  | Account
                .Popup-container.Popup-container--down.Popup-container--right.u-sizeFit
                  .Popup-content.u-padXs.u-sizeFit.u-fontSizeSm
                    h6.title.u-textNoWrap.u-fontSizeSm.u-textSemiBold="#{@user['first_name']} #{@user['last_name']}"
                    .u-textNoWrap.u-fontSizeSm="#{@user['email']}"
                    hr.Divider.u-spaceEndsNone
                    a href=url_for(logout_path) Logout

    .Grid-cell.u-sizeFit