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
  if state === 'enrolling'
    .alert.alert-info Enrolling in course..
  else if state === 'ppc_logged_out'
    .alert.alert-success Log in or create an account to join this course.
  else
    if state === 'unknown_error'
      .alert.alert-danger.alert-dismissible= stateMessage

    if studentMode
      +student-main
    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 student-main
  button.btn.btn-warning.btn-teacher(data-i18n="courses.teachers_click")
  h1.center(data-i18n="courses.courses_on_coco")

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
                    .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")

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
                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
                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')