extends /templates/base

block content

  //- DO NOT localize / i18n

  div TODO: Add already enrolled view checkbox
  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 your class
                .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(data-course-id="#{courseID}") Enter
          .row.button-row.center.row-pick-class
            .col-md-12
              div.or Or
          .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(data-course-id="#{courseID}") Enroll
          .row.button-row.center
            .col-md-12
              div.or Or
          .row.button-row.center
            .col-md-12
              button.btn.btn-success.btn-lg.btn-buy(data-course-id="#{courseID}") Buy this course

  h1.center Courses

  .info-container
    //- p.center.gameplay-img-container
    //-   img(src="/images/pages/courses/101_info.png" width='800')
    p A course is a selection of CodeCombat levels designed to introduce computer science concepts in a fun and engaging environment.
    .container-fluid
      .row
        .col-md-12
          p.center
            button.btn.btn-success.btn-lg.btn-buy Enroll Now!
      .row
        .col-md-6
          div With CodeCombat courses, you and your students will:
          ul
            li Learn more in less time
            li With no experience necesssary
            li Monitor student progress
          br
        .col-md-6
          p
            div.praise-quote "#{praise.quote}"
            div.caption-text - #{praise.source}

  //- h2.center Available Courses

  .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
        strong Topics
        ul
          each topic in course.topics
            li= topic
        strong Hours of content: #{course.duration}
        .container-fluid
          .row.button-row.center
            .col-md-12
              br
              button.btn.btn-success.btn-continue(data-toggle='modal', data-target="#continueModal", data-course-title="#{course.title}", data-course-id="#{courseID}") #{course.unlocked ? 'Continue' : 'Enter'}