extends /templates/base-flat

block content
  .style-flat(data-spy="scroll", data-target="#nav-container")
    .container-fluid#jumbotron
      .container
        .row
          //TODO: Size these correctly
          .col-xs-10
            h1(data-i18n="about.main_title")
        .row
          .col-xs-8
            h2(data-i18n="about.main_description")

    #nav-container
      nav#fixed-nav.nav.navbar
        .container-fluid.text-center
          ul.center-block
            li.active
              a(href="#mission")#mission-link
                small.label(data-i18n="about.mission_link")
            li
              a(href="#team")#team-link
                small.label(data-i18n="about.team_link")
            li
              a(href="#community")#community-link
                small.label(data-i18n="nav.community")
            li
              a(href="#story")#story-link
                small.label(data-i18n="about.story_link")
            li
              a(href="#jobs")#jobs-link
                small.label(data-i18n="nav.careers")
            li
              a(href="#contact")#contact-link
                small.label(data-i18n="about.press_link")

    #about-container.container
      #mission.anchor.row
        .col-sm-6#mission-graphic.responsive-side-margins
          img(src="/images/pages/about/globe_white.png")
          h2(data-i18n="about.mission_title")
          #mission-graphic-filler
        .col-sm-5.col-sm-offset-1
          #mission-text.responsive-side-margins
            p(data-i18n="[html]about.mission_description_1")
            p(data-i18n="[html]about.mission_description_2")

      #team.anchor
        .text-center
          h3(data-i18n="about.team_title")
          h4.responsive-side-margins(data-i18n="about.team_values")
        ul
          // Full time
          li
            a(href="http://www.nickwinter.net" rel="external")
              img(src="/images/pages/about/nick_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://www.nickwinter.net" rel="external") Nick Winter
              small(data-i18n="about.nick_title")
              small(data-i18n="about.nick_blurb")

          li
            a(href="http://www.mattlott.com/" rel="external")
              img(src="/images/pages/about/matt_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://www.mattlott.com/" rel="external") Matt Lott
              small(data-i18n="about.matt_title")
              br

          li
            a(href="http://cat.zdh.com/" rel="external")
              img(src="/images/pages/about/cat_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://cat.zdh.com/" rel="external") Catherine Weresow
              small(data-i18n="about.cat_title")
              small(data-i18n="about.cat_blurb")

          li
            img(src="/images/pages/about/scott_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Scott Erickson
              small(data-i18n="about.scott_title")
              small(data-i18n="about.scott_blurb")

          li
            img(src="/images/pages/about/maka_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Michael 'Maka' Gradin
              small(data-i18n="about.maka_title")
              small(data-i18n="about.maka_blurb")

          li
            a(href="http://basicer.com/" rel="external")
              img(src="/images/pages/about/rob_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://basicer.com/" rel="external") Rob Blanckaert
              small(data-i18n="about.rob_title")
              small(data-i18n="about.rob_blurb")

          li
            img(src="/images/pages/about/josh_c_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Josh Callebaut
              small(data-i18n="about.josh_c_title")
              small(data-i18n="about.josh_c_blurb")

          li
            a(href="http://robinyang.com/" rel="external")
              img(src="/images/pages/about/robin_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://robinyang.com/" rel="external") Robin Yang
              small(data-i18n="about.robin_title")
              small(data-i18n="about.robin_blurb")

          li
            img(src="/images/pages/about/phoenix_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Phoenix Eliot
              small(data-i18n="about.phoenix_title")
              br

          li
            img(src="/images/pages/about/nolan_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Nolan Kelly
              small(data-i18n="about.nolan_title")
              br

          li
            img(src="/images/pages/about/elliot_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Elliot Okiwelu
              small(data-i18n="about.elliot_title")
              br

          li
            img(src="/images/pages/about/lisa_small.png").img-thumbnail
            .team-bio
              h6.label.team-name Lisa Wu
              small Marketing Development Rep
              br

          // Part time / contract
          li
            a(href="http://floor.is/lava/" rel="external")
              img(src="/images/pages/about/josh_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://floor.is/lava/" rel="external") Josh Lee
              small(data-i18n="about.josh_title")
              small(data-i18n="about.josh_blurb")

          li
            a(href="https://soundcloud.com/taking-off" rel="external")
              img(src="/images/pages/about/jose_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="https://soundcloud.com/taking-off" rel="external") Jose Antonini
              small(data-i18n="about.jose_title")
              small(data-i18n="about.jose_blurb")

          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/pavel_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Pavel Konstantinov
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

          li
            a(href="http://retrostylegames.com/" rel="external")
              img(src="/images/pages/about/oleg_small.png").img-thumbnail
            .team-bio
              h6.label.team-name
                a(href="http://retrostylegames.com/" rel="external") Oleg Ulyanickiy
              small(data-i18n="about.retrostyle_title")
              small(data-i18n="about.retrostyle_blurb")

      #community.anchor
        #community-row-1.row.text-center
          .col-sm-12
          .text-center
            h3(data-i18n="about.community_title")
            h4(data-i18n="about.community_subtitle")
            img(src="/images/pages/about/github_avatars.png")#community-avatars

        #community-row-2.row
          .col-sm-5
            p.responsive-side-margins
              span.spr(data-i18n="about.community_description_1")
              a(href="/contribute")
                span(data-i18n="about.community_description_link")
              span.spl(data-i18n="about.community_description_2")
          .col-sm-6.col-sm-offset-1#community-graphic.responsive-side-margins
            h2(data-i18n="about.number_contributors")
            img(src="/images/pages/about/github.png")
            #community-graphic-filler

      #story.anchor
        .text-center
          h3(data-i18n="about.story_title")
          h4.responsive-side-margins(data-i18n="about.story_subtitle")
        .row
          #story-graphic-1.col-lg-6
            .media
              .pull-left
                img.media-object#story-image-1(src="/images/pages/about/character_silouhette.png")
              .media-body
                .media-heading.text-h1
                  span(data-i18n="about.story_statistic_1a")
                  br
                  span(data-i18n="about.story_statistic_1b")
                p.text-h5(data-i18n="about.story_statistic_1c")

          .col-lg-5.col-lg-offset-1
            #story-graphic-2
              .media
                p.text-h5(data-i18n="about.story_statistic_2a")
                .pull-right
                  img(src="/images/pages/about/globe_green.png")
                .media-body
                  .media-heading.text-h1(data-i18n="about.story_statistic_2b")

        #story-graphic-3.text-center
          p
            div.text-h5(data-i18n="about.story_statistic_3a")
            #story-bracketed-text
              div#left-bracket
                img(src="/images/pages/about/bracket_left.png")
              div.text-h1(data-i18n="about.story_statistic_3b")
              div#right-bracket
                img(src="/images/pages/about/bracket_right.png")
          #story-languages
            .text-center
              .text-h5(data-i18n="about.story_statistic_3c")
            #language-icons.text-center(title="CoffeeScript, JavaScript, Python, Java, Lua")
              img.hidden-xs(src="/images/pages/about/languages.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/languages_group1.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/languages_group2.png")

        #story-graphic-4.text-center
          p
            div.text-h5(data-i18n="about.story_long_way_1")
            figure
              img(src="/images/pages/about/sketch.png")
              figcaption
                small(data-i18n="about.story_sketch_caption")
          p
            .text-h5(data-i18n="about.story_long_way_2")

      #jobs.anchor
        .text-center
          h3(data-i18n="about.jobs_title")
          h4(data-i18n="about.jobs_subtitle")
        #jobs-row.row
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            #benefits
              h5(data-i18n="about.jobs_benefits")
              ul
                li.small
                  a.benefits-link(href='http://blog.triplebyte.com/fixing-the-inequity-of-startup-equity', data-i18n="about.jobs_benefit_9")
                li.small(data-i18n="about.jobs_benefit_6")
                li.small(data-i18n="about.jobs_benefit_10")
                li.small(data-i18n="about.jobs_benefit_11")
                li.small(data-i18n="about.jobs_benefit_4")
                li.small(data-i18n="about.jobs_benefit_5")
                li.small(data-i18n="about.jobs_benefit_7")
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            .job-listing
              h5 Marketing Manager
              .text-center
                small.label
                  | San Francisco • Fulltime
              p.small We're looking for an amazing marketer to help us fill our funnel and keep the pipeline growing. As our Marketing Manager, you'll be responsible for driving traffic to our website through content creation and converting those visitors into leads and customers using both automated and personalized content.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/1033ec13-d4a0-498d-99e0-628afdb56fb5" rel="external")
                span(data-i18n="about.learn_more")
          .col-sm-6.col-md-5.col-md-offset-1.col-lg-4.col-lg-offset-0
            .job-listing
              h5 Sales Representative
              .text-center
                small.label
                  | San Francisco • Fulltime
              p.small School districts are scrambling to offer computer science classes to all their students as a core subject. They have had no solution, because they can't afford to hire enough programming teachers – until now.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/3f6ff123-16ce-4ecb-aba3-dcf4e8927c47" rel="external")
                | Learn More
          .col-sm-6.col-md-5.col-lg-4
            .job-listing
              h5(data-i18n="about.jobs_custom_title")
              p.small(data-i18n="about.jobs_custom_description")
              p.small
                span.spr(data-i18n="about.jobs_custom_contact_1")
                a(href="mailto:team@codecombat.com")
                  | team@codecombat.com
                span.spl(data-i18n="about.jobs_custom_contact_2")

      #contact.anchor
        .text-center
          h3(data-i18n="about.contact_title")
          h4(data-i18n="about.contact_subtitle")
          a(href="mailto:team@codecombat.com") team@codecombat.com

      #files
        .row
          .col-md-6.col-lg-8
            #screenshots
              span.label(data-i18n="about.screenshots_title")
              .hidden-sm.hidden-md.hidden-lg
                small(data-i18n="about.screenshots_hint")
              #screenshot-grid
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='0')
                  img(src="/images/pages/about/screenshot_desert.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='1')
                  img(src="/images/pages/about/screenshot_forest.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='2')
                  img(src="/images/pages/about/screenshot_dungeon.png")
                a.screen-thumbnail(data-toggle="modal", data-target="#screenshot-lightbox", data-index='3')
                  img(src="/images/pages/about/screenshot_glacier.png")
              .clearfix.hidden-xs
                small(data-i18n="about.screenshots_hint")
          .col-md-6.col-lg-4
            #downloads-container
              #downloads
                .label(data-i18n="about.downloads_title")
                ul
                  li
                    a.small(href="http://files.codecombat.com/presspack/AboutCodeCombat.pdf")
                      span(data-i18n="about.about_codecombat")
                      | (.pdf)
                  li
                    a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.ai")
                      span(data-i18n="about.logo")
                      | (.ai)
                  li
                    a.small(href="http://files.codecombat.com/presspack/CodeCombat-Logo.png")
                      span(data-i18n="about.logo")
                      | (.png)
                  li
                    a.small(href="http://files.codecombat.com/presspack/GameImages.zip")
                      span(data-i18n="about.screenshots")
                      | (.zip)
                  li
                    a.small(href="http://files.codecombat.com/presspack/gameimages/CodeCombat_Splash.png")
                      span(data-i18n="about.character_art")
                      | (.png)
                .text-center
                  a.btn.btn-lg.btn-primary-alt#download-button(href="http://files.codecombat.com/presspack/CodeCombat_PressPack.zip")
                    span.glyphicon.glyphicon-download-alt
                    span(data-i18n="about.download_all")

      #screenshot-lightbox.modal.fade(data-show="false")
        .modal-dialog
          .modal-content
            #screenshot-carousel.carousel
              ol.carousel-indicators
                li(data-target=".screenshot-display", data-slide-to="0").active
                li(data-target=".screenshot-display", data-slide-to="1")
                li(data-target=".screenshot-display", data-slide-to="2")
                li(data-target=".screenshot-display", data-slide-to="3")

              .carousel-inner
                .item.active
                  img#screenshot-desert(src="/images/pages/about/desert.png")
                .item
                  img#screenshot-forest(src="/images/pages/about/forest.png")
                .item
                  img#screenshot-dungeon(src="/images/pages/about/dungeon.png")
                .item
                  img#screenshot-glacier(src="/images/pages/about/glacier.png")
              a#carousel-left.left.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-left.glyphicon-chevron-left(aria-hidden="true")
                span.sr-only(data-i18n="about.previous")
              a#carousel-right.right.carousel-control(href="#screenshot-carousel", role="button")
                span.glyphicon.glyphicons-chevron-right.glyphicon-chevron-right(aria-hidden="true")
                span.sr-only(data-i18n="about.next")

      #location
        .row
          .col-sm-4.col-sm-offset-2
            p
              b CodeCombat Inc.
            p 301 Howard Street
            p Suite No. 830
            p San Francisco, California 94105
            a(href="mailto:team@codecombat.com") team@codecombat.com
          .col-sm-4
            p
              b(data-i18n="about.location_title")
            iframe(width="370", height="280", frameBorder="2", src="https://www.google.com/maps/embed/v1/place?key=AIzaSyAIGQz3OMbv5YWivScUM86-zESjEgJR2Xo&q=301+Howard+St+Suite+830,+San+Francisco,+CA+94105")