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#redeemCodeModal
    .modal-dialog
      .modal-header
        button.close(data-dismiss='modal')
          span ×
        h3.modal-title Loading...
      .modal-body
        input.code-input(type='text', placeholder="Enter unlock code")
      .modal-footer
        button.btn.btn-success.btn-redeem-code Enroll

  h1.center 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 #{course.title} #{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
            .col-md-4
              button.btn.btn-warning.btn-have-code(data-toggle='modal', data-target="#redeemCodeModal", data-course-title="#{course.title}", data-course-id="#{courseID}") I have a code
            .col-md-4
              if course.unlocked
                button.btn.btn-success.btn-enter(data-course-id="#{courseID}") Enter
            .col-md-4
              button.btn.btn-info.btn-more-info(data-course-id="#{courseID}") More details