codecombat/app/templates/courses/courses.jade

extends /templates/base

block content

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

  br
  
  .hidden-md.hidden-lg
    .alert.alert-danger Courses not supported on mobile devices.
      
  .hidden-xs.hidden-sm
    if state === 'enrolling'
      .alert.alert-info Enrolling in course..
    else if state === 'ppc_logged_out'
      .alert.alert-danger.logged_out Create account or log in to join this course.
      button.btn.btn-sm.btn-primary.header-font.signup-button(data-i18n="login.sign_up")
      button.btn.btn-sm.btn-default.header-font.login-button(data-i18n="login.log_in")
    else
      if state === 'unknown_error'
        .alert.alert-danger.alert-dismissible= stateMessage
  
      if hocLandingPage
        +hoc-landing
      else
        if view.courseInstances.size()
          +course-instance-list

        if studentMode
          +student-main
        else 
          if hocMode
            +teacher-hoc
          else
            +teacher-main
        .container-fluid
          - var i = 0
          while i < courses.length
            .row
              +course-block(courses[i], instances)
              - i++
              if i < courses.length
                +course-block(courses[i], instances)
                - i++
    

mixin hoc-landing
  h1.center Welcome to CodeCombat's Hour of Code!
  br
  .container-fluid
    .row
      .col-md-6.center
        button.btn.btn-lg.btn-success.btn-student(data-i18n="courses.students_click")
      .col-md-6.center
        button.btn.btn-lg.btn-default.btn-teacher(data-i18n="courses.teachers_click")
        
mixin course-instance-list
  h1.center Courses You Are In
  .row
    .col-md-10.col-md-offset-1
      .list-group
        for courseInstance in view.courseInstances.models
          - var course = view.courses.get(courseInstance.get('courseID'));
          .list-group-item
            .list-group-item-heading
              h3
                a(href="/courses/#{course.id}/#{courseInstance.id}")
                  span.spr #{courseInstance.get('name')}
                  small (#{course.get('name')})
              p= courseInstance.get('description')

mixin student-main
  button.btn.btn-warning.btn-teacher(data-i18n="courses.teachers_click")
  h1.center(data-i18n="courses.courses_on_coco")

mixin teacher-hoc
  button.btn.btn-warning.btn-student(data-i18n="courses.students_click")
  h1.center Welcome to CodeCombat's Hour of Code!
  p
    strong How to use CodeCombat with your students:
    ol
      li Click the green 'Get FREE course' button below
      li Follow the enrollment instructions
      li Add students via the 'Add Students' tab
  p 
    span.spr If you have any problems, please email
    a(href='mailto:team@codecombat.com') team@codecombat.com
  br

mixin teacher-main
  button.btn.btn-warning.btn-student(data-i18n="courses.students_click")
  h1.center(data-i18n="courses.courses_on_coco")
  .info-container
    p(data-i18n="courses.designed_to")
    .container-fluid
      .row
        .col-md-6
          ul
            li(data-i18n="courses.more_in_less")
            li(data-i18n="courses.no_experience")
            li(data-i18n="courses.easy_monitor")

          p(data-i18n="courses.purchase_for_class")
          p.faq-blurb
            span.spr(data-i18n="courses.see_the")
            a.courses-faq(data-i18n="courses.faq")
            span.spl(data-i18n="courses.more_info")
        .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}

  //- h1.center(data-i18n="courses.free_trial")
  //- .info-container
  //-   p
  //-     span.spr(data-i18n="teachers.teacher_subs_1")
  //-     a(href='/teachers/freetrial', data-i18n="teachers.teacher_subs_2")
  //-     span.spl(data-i18n="courses.get_access")

  h2.center(data-i18n="courses.choose_course")

mixin student-dialog(course)
  .modal.continue-dialog(id="continueModal#{course.id}")
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span &times;
        h3.modal-title= course.get('name')
      .modal-body
        .container-fluid
          .row.button-row
            .col-md-12
              .well.well-sm
                p
                  div.instruction-label(data-i18n="courses.enter_code")
                .container-fluid
                  .row.student-dialog-state-row
                    .col-md-12
                      if view.state === 'enrolling-by-modal'
                        .progress.progress-striped.active
                          .progress-bar(style="width: 100%")
                      else if view.state === 'unknown_error'
                        .alert.alert-danger= view.stateMessage
                  .row
                    .col-md-8
                      input.code-input(type='text', data-course-id="#{course.id}", data-i18n="[placeholder]courses.enter_code1", placeholder="Enter unlock code")
                    .col-md-4
                      button.btn.btn-success.btn-enroll(data-course-id="#{course.id}", data-i18n="courses.enroll")
                  if hocMode && course.get('pricePerSeat') === 0 || me.isAdmin()
                    .row.button-row.center.row-pick-class
                      .col-md-12
                        br
                        div.or(data-i18n="courses.or")
                    .row.button-row.center
                      .col-md-12
                        button.btn.btn-success.btn-lg.btn-hoc-student-continue(data-course-id="#{course.id}") Continue by yourself

mixin teacher-dialog(course)
  .modal.continue-dialog(id="continueModal#{course.id}")
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span &times;
        h3.modal-title= course.get('name')
      .modal-body
        .container-fluid
          if enrolledCourses[course.id]
            .row.button-row.row-pick-class
              .col-md-12
                .well.well-sm
                  p
                    div.instruction-label(data-i18n="courses.pick_from_classes")
                  .container-fluid
                    .row
                      .col-md-8
                        select.form-control.select-session(data-course-id="#{course.id}")
                          each inst in instances
                            if inst.get('courseID') == course.id
                              if inst.get('name')
                                option(value="#{inst.id}")= inst.get('name')
                              else
                                option(value="#{inst.id}", data-i18n="courses.unnamed")
                      .col-md-4
                        button.btn.btn-success.btn-enter(data-course-id="#{course.id}", data-i18n="courses.enter")
            .row.button-row.center.row-pick-class
              .col-md-12
                div.or(data-i18n="courses.or")
          .row.button-row.center
            .col-md-12
              if course.get('pricePerSeat') === 0 || me.isAdmin()
                button.btn.btn-success.btn-lg.btn-buy(data-course-id="#{course.id}") Start new class
              else
                button.btn.btn-success.btn-lg.btn-buy(data-course-id="#{course.id}", data-i18n="courses.buy_course1")

mixin course-block(course)
  if studentMode
    +student-dialog(course)
  else
    +teacher-dialog(course)
  .col-md-6
    .well.panel.course-panel(class=enrolledCourses[course.id] ? 'panel-success' : 'panel-info')
      .panel-heading
        .panel-title 
          span.spr #{course.get('name')}
          strong #{enrolledCourses[course.id] ? '[ enrolled ]' : ''}
      .panel-body
        .container-fluid
          .row
            .col-md-12
              p
               img.course-image(src="#{course.get('screenshot')}")
          .row.button-row
            .col-md-6
              strong(data-i18n="courses.topics")
              ul
                each concept in course.get('concepts')
                  li(data-i18n="concepts." + concept)
              strong
                span.spr(data-i18n="courses.hours_content")
                span #{course.get('duration')}
            .col-md-6.center(style='margin-top: 40px;')
              if studentMode
                if enrolledCourses[course.id]
                  a.btn.btn-lg.btn-success.btn-continue(href="/courses/#{course.id}?student=true", data-i18n="common.continue")
                else
                  button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal#{course.id}", data-i18n="courses.enter") Enter
              else if enrolledCourses[course.id]
                button.btn.btn-lg.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal#{course.id}", data-i18n="common.continue")
              else if course.get('pricePerSeat') === 0 || me.isAdmin()
                button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{course.id}", data-i18n='courses.get_free')
              else
                button.btn.btn-lg.btn-success.btn-buy(data-course-id="#{course.id}", data-i18n='courses.buy_course')