extends /templates/modal/modal_base

block modal-header-content
  h3 Choose an Opponent

block modal-body-content
  
  div#noob-view.secret
    a(href="/play/level/#{levelID}-tutorial").btn.btn-success.btn-block.btn-lg
      p
        strong Play Tutorial
      span Recommended if you've never played before
    span.btn.btn-primary.btn-block.btn-lg#skip-tutorial-button Skip Tutorial

  div#normal-view
  
    p.tutorial-suggestion
      strong Not sure what's going on?
      |  
      a(href="/play/level/#{levelID}-tutorial") Play the tutorial first.
  
    a(href="/play/level/#{levelID}?team=#{teamID}")
      div.play-option
        img(src=myPortrait).my-icon.only-one
        img(src="/images/pages/play/ladder/"+teamID+"_ladder_tutorial.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
        img(src=genericPortrait).opponent-icon
        img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_tutorial.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
        div.my-name.name-label.only-one
          span= myName
        div.opponent-name.name-label
          span Simple AI
        div.difficulty
          span Warmup
        div.vs VS
    
    if challengers.easy
      a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.easy.sessionID}")
        div.play-option.easy-option
          img(src=myPortrait).my-icon.only-one
          img(src="/images/pages/play/ladder/"+teamID+"_ladder_easy.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
          img(src=challengers.easy.opponentImageSource||genericPortrait).opponent-icon
          img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_easy.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
          div.my-name.name-label.only-one
            span= myName
          div.opponent-name.name-label
            span= challengers.easy.opponentName
          div.difficulty
            span Easy
          div.vs VS
  
    if challengers.medium
      a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.medium.sessionID}")
        div.play-option.medium-option
          img(src=myPortrait).my-icon.only-one
          img(src="/images/pages/play/ladder/"+teamID+"_ladder_medium.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
          img(src=challengers.medium.opponentImageSource||genericPortrait).opponent-icon
          img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_medium.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
          div.my-name.name-label.only-one
            span= myName
          div.opponent-name.name-label
            span= challengers.medium.opponentName
          div.difficulty
            span Medium
          div.vs VS
  
    if challengers.hard
      a(href="/play/level/#{levelID}?team=#{teamID}&opponent=#{challengers.hard.sessionID}")
        div.play-option.hard-option
          img(src=myPortrait).my-icon.only-one
          img(src="/images/pages/play/ladder/"+teamID+"_ladder_hard.png", style="border: 1px solid #{teamColor}; background: #{teamBackgroundColor}").my-team-icon.img-circle.only-one
          img(src=challengers.hard.opponentImageSource||genericPortrait).opponent-icon
          img(src="/images/pages/play/ladder/"+otherTeamID+"_ladder_hard.png", style="border: 1px solid #{opponentTeamColor}; background: #{opponentTeamBackgroundColor}").opponent-team-icon.img-circle
          div.my-name.name-label.only-one
            span= myName
          div.opponent-name.name-label
            span= challengers.hard.opponentName
          div.difficulty
            span Hard
          div.vs VS

block modal-footer