codecombat/app/templates/courses/mock1/courses.jade

extends /templates/base

block content

  //- DO NOT localize / i18n

  div(style='border-bottom: 1px solid black')
    span *UNDER CONSTRUCTION, send feedback to
    a.spl(href='mailto:team@codecombat.com') team@codecombat.com

  .modal#continueModal
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span ×
        h3.modal-title Loading...
      .modal-body
        .container-fluid
          .row.button-row.row-pick-class
            .col-md-12
              .well.well-sm
                p
                  div.instruction-label Pick from your current classes
                .container-fluid
                  .row
                    .col-md-8
                      select.form-control.select-session
                        each inst in instances
                          option= inst.name
                    .col-md-4
                      button.btn.btn-success.btn-enter Enter
          .row.button-row.center.row-pick-class
            .col-md-12
              div.or Or
          if studentMode
            .row.button-row
              .col-md-12
                .well.well-sm
                  p
                    div.instruction-label Enter an unlock code
                  .container-fluid
                    .row
                      .col-md-8
                        input.code-input(type='text', placeholder="Enter unlock code")
                      .col-md-4
                        button.btn.btn-success.btn-enroll Enroll
          else
            .row.button-row.center
              .col-md-12
                button.btn.btn-success.btn-lg.btn-buy Buy this course

  br
  if !studentMode
    button.btn.btn-warning.btn-student Students Click Here
  else
    button.btn.btn-warning.btn-teacher Teachers Click Here

  h1.center Courses on CodeCombat

  if !studentMode
    .info-container
      p Courses are designed to introduce computer science concepts using CodeCombat's fun and engaging environment. CodeCombat levels are organized around key topics to encourage progressive learning, over the course of 5 hours.

      .container-fluid
        .row
          .col-md-6
            ul
              li Learn more in less time
              li No coding experience necesssary
              li Easily monitor student progress
              
            p Purchase a course for your entire class. It's easy to sign up your students!
            p.faq-blurb
              span.spr See the courses
              a.spr.courses-faq FAQ
              span for more information.
          .col-md-6
            img.img-quote(src="/images/pages/courses/coco_complab.png")
      p
        .well.well-sm
          div.praise-quote "#{praise.quote}"
          div.praise-caption - #{praise.source}

    h2.center Choose Your Course:

  .container-fluid
    - var i = 0
    while i < courses.length
      .row
        +course-block(courses[i], i)
        - i++
        if i < courses.length
          +course-block(courses[i], i)
          - i++

mixin course-block(course, courseID)
  .col-md-6
    .well.panel.course-panel(class=course.unlocked ? 'panel-success' : 'panel-info')
      .panel-heading
        .panel-title 
          span.spr #{course.title}
          strong #{course.unlocked ? '[ enrolled ]' : ''}
      .panel-body
        .container-fluid
          .row
            .col-md-12
              p
               img.course-image(src="#{course.image}")
          .row.button-row
            .col-md-6
              strong Topics
              ul
                each topic in course.topics
                  li= topic
              strong Hours of content: #{course.duration}
            .col-md-6.center(style='margin-top: 40px;')
              if !studentMode
                if course.unlocked
                  button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'}
                else if course.title === 'Introduction to Computer Science'
                  button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{courseID}") Get FREE course
                else
                  button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{courseID}") Buy course
              else
                if course.unlocked
                  a.btn.btn-lg.btn-success.btn-continue(href="/courses/mock1/#{courseID}?student=true") Continue
                else
                  button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") Enter