.modal-dialog
  .modal-content

    img(src="/images/pages/play/modal/heroes-background.png", draggable="false")#play-heroes-background
    
    h1(data-i18n="choose_hero.choose_hero")

    div#close-modal
      span.glyphicon.glyphicon-remove

    #hero-carousel.carousel.slide(data-interval=0)
      .carousel-indicator-container
        ol.carousel-indicators
          for hero, index in heroes
            li(data-hero-id=hero.get('original'), title=hero.name, data-slide-to=index, data-target="#hero-carousel", class="hero-indicator hero-index-" + index + (hero.locked ? " locked" : "") + (hero.purchasable ? " purchasable" : ""))
              .hero-avatar
              if hero.locked && !hero.purchasable
                img.lock-indicator(src="/images/pages/game-menu/lock.png", draggable="false")
      .carousel-inner
        for hero in heroes
          div(class="item hero-item" + (hero.locked ? " locked" : "") + (hero.purchasable ? " purchasable" : ""), data-hero-id=hero.get('original'))
            canvas.hero-canvas
            .hero-feature-image
              img(draggable="false")
            .hero-stats
              h2= hero.name
              .hero-description= hero.description
              
              .hero-stat-row
                .stat-label(data-i18n='choose_hero.status')
                .stat-value.hero-status-value(data-i18n=hero.purchasable ? 'play.purchasable' : (hero.locked ? 'play.locked' : 'play.available'))
                
              .hero-stat-row
                .stat-label(data-i18n='choose_hero.weapons')
                .stat-value(data-i18n='choose_hero.weapons_'+hero.class)

              if hero.stats
                if hero.stats.skills.length
                  .hero-stat-row
                    .stat-label(data-i18n='choose_hero.skills')
                    .stat-value= hero.stats.skills.join(', ')
                for stat in ['attack', 'health', 'speed']
                  .hero-stat-row(class=stat)
                    .stat-label(data-i18n='choose_hero.'+stat)
                    .stat-value
                      .stat-progress
                        .stat-progress-bar(style="width: " + (parseInt(hero.stats[stat]*100)) + "%")
      
      a.left(role="button", data-slide="prev", href="#hero-carousel")
        span.glyphicon.glyphicon-play
      a.right(role="button", data-slide="next", href="#hero-carousel")
        span.glyphicon.glyphicon-play

    #hero-footer
      if visibleHero
        if visibleHero.purchasable
          #purchasable-hero-explanation
            h2(data-i18n="choose_hero.available_for_purchase") Available for Purchase
          button.btn.unlock-button#purchase-hero-button
            span.spr(data-i18n="play.unlock") Unlock
            span= visibleHero.get('gems')
            span.gem.gem-20
  
        else if visibleHero.locked
          #locked-hero-explanation
            h2
              span= visibleHero.name
              span.spl(data-i18n="play.locked") Locked
            span.spr(data-i18n="choose_hero.level_to_unlock") Level to unlock:
            strong= visibleHero.unlockLevelName || '???'
  
        else if visibleHero.loaded
          .form
            .form-group.select-group
              span.help-block(data-i18n="choose_hero.programming_language_description") Which programming language do you want to use?
              select#option-code-language(name="code-language")
                for option in codeLanguages
                  option(value=option.id, selected=codeLanguage === option.id)= option.name
                  
          a#confirm-button(data-i18n=confirmButtonI18N)