.map
  .gradient.horizontal-gradient.top-gradient
  .gradient.vertical-gradient.right-gradient
  .gradient.horizontal-gradient.bottom-gradient
  .gradient.vertical-gradient.left-gradient
  .map-background(alt="", draggable="false")

  each level in levels
    if !level.hidden
      div(style="left: #{level.position.x}%; bottom: #{level.position.y}%; background-color: #{level.color}", class="level" + (level.next ? " next" : "") + (level.disabled ? " disabled" : "") + (level.locked ? " locked" : "") + " " + levelStatusMap[level.slug] || "", data-level-slug=level.slug, data-level-original=level.original, title=i18n(level, 'name') + (level.disabled ? ' (Coming Soon to Adventurers)' : ''))
        if level.unlocksHero && !level.purchasedHero
          img.hero-portrait(src="/file/db/thang.type/#{level.unlocksHero}/portrait.png")
        a(href=level.type == 'hero' ? '#' : level.disabled ? "/play" : "/play/#{level.levelPath || 'level'}/#{level.slug}", disabled=level.disabled, data-level-slug=level.slug, data-level-path=level.levelPath || 'level', data-level-name=level.name)
        if level.requiresSubscription
          img.star(src="/images/pages/play/star.png")
        if levelStatusMap[level.slug] === 'complete'
          img.banner(src="/images/pages/play/level-banner-complete.png")
        if levelStatusMap[level.slug] === 'started'
          img.banner(src="/images/pages/play/level-banner-started.png")
      div(style="left: #{level.position.x}%; bottom: #{level.position.y}%", class="level-shadow" + (level.next ? " next" : "") + " " + levelStatusMap[level.slug] || "")
      .level-info-container(data-level-slug=level.slug, data-level-path=level.levelPath || 'level', data-level-name=level.name)
        div(class="level-info " + (levelStatusMap[level.slug] || ""))
          h3= i18n(level, 'name') + (level.disabled ? " (Coming soon!)" : (level.locked ? " (Locked)" : ""))
          - var description = i18n(level, 'description') || level.description || ""
          .level-description!= marked(description)
          if level.disabled
            p
              span.spr(data-i18n="play.awaiting_levels_adventurer_prefix") We release five levels per week.
              a.spr(href="/contribute/adventurer")
                strong(data-i18n="play.awaiting_levels_adventurer") Sign up as an Adventurer
              span.spl(data-i18n="play.awaiting_levels_adventurer_suffix") to be the first to play new levels.
              
          - var playCount = levelPlayCountMap[level.slug]
          if playCount && playCount.sessions > 20
            div
              span.spr #{playCount.sessions}
              span(data-i18n="play.players") players
              span.spr , #{Math.round(playCount.playtime / 3600)}
              span(data-i18n="play.hours_played") hours played

        if isIPadApp && !level.disabled && !level.locked
          button.btn.btn-success.btn-lg.start-level(data-i18n="common.play") Play
    else if level.unlocksHero && !level.purchasedHero
      img.hero-portrait(src="/file/db/thang.type/#{level.unlocksHero}/portrait.png", style="left: #{level.position.x}%; bottom: #{level.position.y}%;")
  
  for adjacentCampaign in adjacentCampaigns
    a(href=(editorMode ? "/editor/campaign/" : "/play/") + adjacentCampaign.slug)
      span.glyphicon.glyphicon-share-alt.campaign-switch(style=adjacentCampaign.style, title=adjacentCampaign.name, data-campaign-id=adjacentCampaign.id)

.game-controls.header-font
  button.btn.items(data-toggle='coco-modal', data-target='play/modal/PlayItemsModal', data-i18n="[title]play.items")
  button.btn.heroes(data-toggle='coco-modal', data-target='play/modal/PlayHeroesModal', data-i18n="[title]play.heroes")
  button.btn.achievements(data-toggle='coco-modal', data-target='play/modal/PlayAchievementsModal', data-i18n="[title]play.achievements")
  if me.get('anonymous') === false || me.get('iosIdentifierForVendor') || isIPadApp
    button.btn.gems(data-toggle='coco-modal', data-target='play/modal/BuyGemsModal', data-i18n="[title]play.buy_gems")
  if me.isAdmin()
    button.btn.account(data-toggle='coco-modal', data-target='play/modal/PlayAccountModal', data-i18n="[title]play.account")
    button.btn.settings(data-toggle='coco-modal', data-target='play/modal/PlaySettingsModal', data-i18n="[title]play.settings")
  else if me.get('anonymous', true)
    button.btn.settings(data-toggle='coco-modal', data-target='core/AuthModal', data-i18n="[title]play.settings")
  
.user-status.header-font
  .user-status-line
    span.gem.gem-30
    span#gems-count.spr= me.gems()
    span.player-level-icon
    span.player-level.spr= me.level()
    span.player-hero-icon
    if me.get('anonymous')
      span.player-name.spr(data-i18n="play.anonymous") Anonymous Player
      button.btn.btn-illustrated.login-button.btn-warning(data-i18n="login.log_in")
      button.btn.btn-illustrated.signup-button.btn-danger(data-i18n="signup.sign_up")
    else
      span.player-name.spr= me.get('name')
      button#logout-button.btn.btn-illustrated.btn-warning(data-i18n="login.log_out") Log Out
      if me.isPremium()
        button.btn.btn-illustrated.btn-primary(data-i18n="nav.contact", data-toggle="coco-modal", data-target="core/ContactModal") Contact


button.btn.btn-lg.btn-inverse#volume-button(data-i18n="[title]play.adjust_volume", title="Adjust volume")
  .glyphicon.glyphicon-volume-off
  .glyphicon.glyphicon-volume-down
  .glyphicon.glyphicon-volume-up

if campaign.loaded
  h1#campaign-status
    .campaign-status-background
      - var fullName = i18n(campaign.attributes, 'fullName')
      if me.get('preferredLanguage', true).split('-')[0] == 'en' || fullName != campaign.get('fullName')
        // We have a translation.
        span.spr= fullName
        | -
      span.spl.spr= levelsCompleted
      | /
      span.spl= levelsTotal
      img.banner(src="/images/pages/play/level-banner-complete.png")