#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.get('name'), data-slide-to=index, data-target="#hero-carousel", class="hero-indicator" + (hero.locked ? " locked" : ""))
          .hero-avatar
          if hero.locked
            img.lock-indicator(src="/images/pages/game-menu/lock.png")

  .carousel-inner
    for hero in heroes
      - var info = heroInfo[hero.get('slug')]
      div(class="item hero-item" + (hero.locked ? " locked" : ""), data-hero-id=hero.get('original'))
        canvas.hero-canvas
        .hero-feature-image
          img
        .hero-stats
          h2= info.fullName
          p
            span(data-i18n="choose_hero.status") Status
            span.spr :
            if hero.locked
              | #{info.status}
            else
              | Available
          p
            span(data-i18n="choose_hero.weapons") Weapons
            span.spr :
            | #{info.weapons}
          p
            span(data-i18n="choose_hero.health") Health
            span.spr :
            | #{info.health}
          p
            span(data-i18n="choose_hero.speed") Speed
            span.spr :
            | #{info.speed}
  a.carousel-control.left(role="button", data-slide="prev", href="#hero-carousel")
    span.glyphicon.glyphicon-chevron-left
  a.carousel-control.right(role="button", data-slide="next", href="#hero-carousel")
    span.glyphicon.glyphicon-chevron-right


.form
  .form-group.select-group
    label.control-label(for="option-code-language", data-i18n="choose_hero.programming_language") Programming Language
    select#option-code-language(name="code-language")
      for option in codeLanguages
        option(value=option.id, selected=codeLanguage === option.id)= option.name
    span.help-block(data-i18n="choose_hero.programming_language_description") Which programming language do you want to use?

if level
  .form-group.select-group
    label.control-label(for="#restart-level-confirm-button", data-i18n="play_level.reload_title") Reload All Code?
    button(data-dismiss="modal", data-i18n="play_level.reload_confirm").btn.btn-sm.btn-danger#restart-level-confirm-button Reload All
    span.help-block(data-i18n="play_level.reload_really") Are you sure you want to reload this level back to the beginning?