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")
              .profile-pic
                img(src="/images/pages/about/team-avatars/nick-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/nick-headshot.png").img-thumbnail.headshot
            .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")
              .profile-pic
                img(src="/images/pages/about/team-avatars/matt-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/matt-headshot.png").img-thumbnail.headshot
            .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")
              .profile-pic
                img(src="/images/pages/about/team-avatars/cat-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/cat-headshot.png").img-thumbnail.headshot
            .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
            .profile-pic
              img(src="/images/pages/about/team-avatars/scott-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/scott-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Scott Erickson
              small(data-i18n="about.scott_title")
              small(data-i18n="about.scott_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/maka-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/maka-headshot.png").img-thumbnail.headshot
            .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")
              .profile-pic
                img(src="/images/pages/about/team-avatars/rob-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/rob-headshot.png").img-thumbnail.headshot
            .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
            .profile-pic
              img(src="/images/pages/about/team-avatars/josh-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/josh-headshot.png").img-thumbnail.headshot
            .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")
              .profile-pic
                img(src="/images/pages/about/team-avatars/robin-avatar.png").img-thumbnail.avatar
                img(src="/images/pages/about/team-headshots/robin-headshot.png").img-thumbnail.headshot
            .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
            .profile-pic
              img(src="/images/pages/about/team-avatars/phoenix-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/phoenix-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Phoenix Eliot
              small(data-i18n="about.phoenix_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/nolan-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/nolan-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Nolan Kelly
              small(data-i18n="about.nolan_title")
              br

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/elliot-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/elliot-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Elliot Okiwelu
              small(data-i18n="about.elliot_title")
              small(data-i18n="about.elliot_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/lisa-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/lisa-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Lisa Wu
              small(data-i18n="about.lisa_title")
              small(data-i18n="about.lisa_blurb")

          li
            .profile-pic
              img(src="/images/pages/about/team-avatars/sean-avatar.png").img-thumbnail.avatar
              img(src="/images/pages/about/team-headshots/sean-headshot.png").img-thumbnail.headshot
            .team-bio
              h6.label.team-name Sean McNulty
              small(data-i18n="about.sean_title")
              br
        ul
          // 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_3")
              a(href="/community")
                span(data-i18n="about.community_description_link_2")
              span , 
              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="JavaScript, Python, HTML, CSS, jQuery, Bootstrap")
              img.hidden-xs(src="/images/pages/about/new_languages.png")
              img.hidden-sm.hidden-md.hidden-lg(src="/images/pages/about/new_languages_xs.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 Sales - Account Executive
              .text-center
                small.label
                  | San Francisco • Full-time
              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.
              p.small We have more demand from schools and districts than we can possibly handle. Want to sell CodeCombat to them?
              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-md-offset-1.col-lg-4.col-lg-offset-0
            .job-listing
              h5 Sales - Assistant
              .text-center
                small.label
                  | Remote • Part-time or full-time
              p.small We're looking for help streamlining communications with all the teachers that want to learn more about CodeCombat so that we don't have to turn people away who want to use CodeCombat. Can you help?
              p.small This is a flexible, remote, entry-level position that will start mostly in email inboxes and grow into whatever you can handle.
              a.job-link.btn.btn-lg.btn-navy(href="https://jobs.lever.co/codecombat/b4ef76ee-1014-4315-8652-44fc0539a583" 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="play.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")
