div#columns.row
  for team, teamIndex in teams
    div.column.col-md-4
      div(id="histogram-display-#{team.name}", class="histogram-display",data-team-name=team.name)
      table.table.table-bordered.table-condensed.table-hover
        thead
          tr
            th(colspan=2)
            th(colspan=3, style="color: #{team.primaryColor}")
              span= team.name
              span.spl(data-i18n="ladder.leaderboard") Leaderboard
          tr
            th(colspan=2)
            th(data-i18n="general.score") Score
            th(data-i18n="general.name").name-col-cell Name
            th

        tbody
          - var topSessions = team.leaderboard.topPlayers.models;
          - var showJustTop = team.leaderboard.inTopSessions() || me.get('anonymous');
          - if(!showJustTop && topSessions.length == 20) topSessions = topSessions.slice(0, 10);
          for session, rank in topSessions
            - var myRow = session.get('creator') == me.id
            tr(class=myRow ? "success" : "", data-player-id=session.get('creator'), data-session-id=session.id)
              td.code-language-cell(style="background-image: url(/images/common/code_languages/" + session.get('submittedCodeLanguage') + "_icon.png)" title=capitalize(session.get('submittedCodeLanguage')))
              td.rank-cell= rank + 1
              td.score-cell= Math.round(session.get('totalScore') * 100)
              td.name-col-cell= session.get('creatorName') || "Anonymous"
              td.fight-cell
                a(href="/play/level/#{level.get('slug') || level.id}?team=#{team.otherTeam}&opponent=#{session.id}")
                  span(data-i18n="ladder.fight") Fight!

          if !showJustTop && team.leaderboard.nearbySessions().length
            tr(class="active")
              td(colspan=4).ellipsis-row ...
            for session in team.leaderboard.nearbySessions()
              - var myRow = session.get('creator') == me.id
              tr(class=myRow ? "success" : "", data-player-id=session.get('creator'), data-session-id=session.id)
                td.code-language-cell(style="background-image: url(/images/common/code_languages/" + session.get('submittedCodeLanguage') + "_icon.png)")
                td.rank-cell= session.rank
                td.score-cell= Math.round(session.get('totalScore') * 100)
                td.name-col-cell= session.get('creatorName') || "Anonymous"
                td.fight-cell
                  a(href="/play/level/#{level.get('slug') || level.id}?team=#{team.otherTeam}&opponent=#{session.id}")
                    span(data-i18n="ladder.fight") Fight!
      if teamIndex == 1
        .btn.btn-sm.load-more-ladder-entries More

  div.column.col-md-4
    h4.friends-header(data-i18n="ladder.friends_playing") Friends Playing
    if me.get('anonymous')
      div.alert.alert-info
        a(data-toggle="coco-modal", data-target="core/AuthModal", data-i18n="ladder.log_in_for_friends") Log in to play with your friends!
    
    else
      if !onFacebook || !onGPlus
        div.connect-buttons
          span(data-i18n="ladder.social_connect_blurb") Connect and play against your friends!
          br
          if !onFacebook
            button.btn.btn-sm.connect-facebook(data-i18n="community.facebook") Facebook
          if !onGPlus
            button.btn.btn-sm.connect-google-plus(data-i18n="community.gplus") Google+

      if friends.length
        for friend in friends
          p.friend-entry
            img(src=friend.imageSource).img-thumbnail
            span= friend.creatorName + ' (' + friend.name + ')'
            br
            span= Math.round(friend.totalScore * 100)
            span : 
            span= friend.team
            br
            a(href="/play/level/#{level.get('slug') || level.id}/?team=#{friend.otherTeam}&opponent=#{friend._id}")
              span(data-i18n="ladder.fight") Fight!

      else if onFacebook || onGPlus
        p(data-i18n="ladder.invite_friends_to_battle") Invite your friends to join you in battle!