extends /templates/modal/modal_base

block modal-header-content
  h3 Choose an Opponent

block modal-body-content
  
  p.tutorial-suggestion
    span Not sure what's going on?
    |  
    a(href="/play/level/brawlwood-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