#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
          //.hero-description= info.description  // Not until we have written the descriptions.
          .hero-status
            span(data-i18n="choose_hero.status") Status
            span.spr :
            if hero.locked
              | #{info.status}
            else
              | Available
          .hero-class
            span(data-i18n="choose_hero.weapons") Weapons
            span.spr :
            | #{info.weapons}
          for statInfo in [{name: 'attack', color: 'danger'}, {name: 'health', color: 'info'}, {name: 'speed', color: 'success'}]
            - var tooltip = "";
            - if (statInfo.name == 'attack')
            -   tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' weapon damage';
            - else if (statInfo.name == 'health')
            -   tooltip = Math.round(100 * info[statInfo.name + 'Factor']) + '% ' + info.class.toLowerCase() + ' armor health';
            - else if (statInfo.name == 'speed')
            -   tooltip = info.speedAbsolute + ' meters per second';
            .hero-stat(title=tooltip)
              .progress
                div(class="progress-bar progress-bar-" + statInfo.color, style="width: " + (10 * info[statInfo.name]) + "%")
                .hero-stat-label
                  span(data-i18n="choose_hero." + statInfo.name)
                  span.spr :
                  | #{info[statInfo.name]}

          if info.skills
            .hero-skills
              span(data-i18n="choose_hero.skills") Skills
              span.spr :
              for skill in info.skills
                code.spl.spr= skill
  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
    //span.help-block(data-i18n="choose_hero.programming_language_description") Which programming language do you want to use?
    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