extends /templates/base

block content

  h1#site-slogan(data-i18n="home.slogan") Learn to Code by Playing a Game

  .code-languages
    .primary-code-languages.row
      .col-sm-6
        .code-language#javascript(data-code-language='javascript')
          .code-wizard
          h2 JavaScript
          p(data-i18n="home.javascript_blurb") The language of the web. Great for writing websites, web apps, HTML5 games, and servers.
          - var playCount = codeLanguageCountMap.javascript
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

      .col-sm-6
        .code-language.beta#python(data-code-language='python')
          .code-wizard
          .code-language-beta
          h2 Python
          p(data-i18n="home.python_blurb") Simple yet powerful, Python is a great general purpose programming language.
          - var playCount = codeLanguageCountMap.python
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

    .secondary-code-languages.row
      .col-sm-3
        .code-language.beta#coffeescript(data-code-language='coffeescript')
          .code-language-logo
          .code-wizard
          .code-language-beta
          h3 CoffeeScript
          p(data-i18n="home.coffeescript_blurb") Nicer JavaScript syntax.
          - var playCount = codeLanguageCountMap.coffeescript
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

      .col-sm-3
        .code-language.beta#clojure(data-code-language='clojure')
          .code-language-logo
          .code-wizard
          .code-language-beta
          h3 Clojure
          p(data-i18n="home.clojure_blurb") A modern Lisp.
          - var playCount = codeLanguageCountMap.clojure
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

      .col-sm-3
        .code-language.beta#lua(data-code-language='lua')
          .code-language-logo
          .code-wizard
          .code-language-beta
          h3 Lua
          p(data-i18n="home.lua_blurb") Game scripting language.
          - var playCount = codeLanguageCountMap.lua
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

      .col-sm-3
        .code-language.beta#io(data-code-language='io', title="Careful: Io is still quite buggy")
          .code-language-logo
          .code-wizard
          .code-language-beta
          h3 Io
          p(data-i18n="home.io_blurb") Simple but obscure.
          - var playCount = codeLanguageCountMap.io
          if playCount
            div.language-play-count
              span.spr= playCount
              span(data-i18n="resources.sessions") sessions

  .alert.alert-danger.lt-ie10
    strong(data-i18n="home.no_ie") CodeCombat does not run in Internet Explorer 9 or older. Sorry!

  if isMobile
    .alert.alert-danger.mobile
      strong(data-i18n="home.no_mobile") CodeCombat wasn't designed for mobile devices and may not work!
  if isOldBrowser
    .alert.alert-danger.old-browser
      strong(data-i18n="home.old_browser") Uh oh, your browser is too old to run CodeCombat. Sorry!
      br
      span(data-i18n="home.old_browser_suffix") You can try anyway, but it probably won't work.
  
  a#beginner-campaign(href="/play/level/rescue-mission")
    div.game-mode-wrapper
      if isEnglish
        img(src="/images/pages/home/campaign.jpg").img-rounded
      else
        img(src="/images/pages/home/campaign_notext.jpg").img-rounded
        h3(data-i18n="home.campaign") Campaign
        h4(data-i18n="home.for_beginners") For Beginners
      .play-text(data-i18n="home.play") Play
      .code-language-logo

  a#multiplayer(href="/play/ladder")
    div.game-mode-wrapper
      if isEnglish
        img(src="/images/pages/home/multiplayer.jpg").img-rounded
      else
        img(src="/images/pages/home/multiplayer_notext.jpg").img-rounded
        h3(data-i18n="home.multiplayer") Multiplayer
        h4(data-i18n="home.for_developers") For Developers
      .play-text(data-i18n="home.play") Play
      .code-language-logo

  .clearfix