extends /templates/base-flat

block page_nav
  include ./teacher-dashboard-nav.jade

block content
  if !me.isTeacher() && view.ownedClassrooms.size()
    .alert.alert-danger.text-center
      .container
        // DNT: Temporary
        h3 ATTENTION: Please upgrade your account to a Teacher Account.
        p
          | We are transitioning to a new improved classroom management system for instructors.
          | Please convert your account to ensure you retain access to your classrooms. 
        a.btn.btn-primary.btn-lg(href="/teachers/update-account") Upgrade to teacher account
    
  .container
    h1(data-i18n="courses.title")
    h2(data-i18n="courses.subtitle")
    //- p
    //-   a(href="https://discourse.codecombat.com/t/course-level-changelog/7352" data-i18n="courses.changelog")

  .courses.container
    - var courses = view.courses.models;
    - var courseIndex = 0;
    while courseIndex < courses.length
      - var course = courses[courseIndex];
      - courseIndex++;
      .course.row
        .col-sm-9
          +course-info(course)
        if me.isTeacher() || me.isAdmin()
          .col-sm-3
            .play-level-form(data-course-id=course.id)
              .form-group
                label.control-label
                  span(data-i18n="courses.select_language")
                  | :
                  select.language-select.form-control
                    //- TODO: Automate this list @scott
                    //- Web dev courses use HTML and JavaScript, except web-dev-1 which doesn't have scripting
                    - var courseSlug = course.get('slug') || '';
                    if courseSlug === 'web-dev-1'
                      option(value="javascript")
                        | HTML
                    else if courseSlug.indexOf('web-dev') >= 0
                      option(value="javascript")
                        | HTML / JavaScript
                    else
                      option(value="python")
                        | Python
                      option(value="javascript")
                        | JavaScript
                    //- option(value="coffeescript")
                    //-   | CoffeeScript (Experimental)
                    //- option(value="clojure")
                    //-   | Clojure (Experimental)
                    //- option(value="lua")
                    //-   | Lua
                    //- option(value="java")
                    //-   | Java
              .form-group
                label.control-label
                  span(data-i18n="courses.select_level")
                  | :
                  select.level-select.form-control
                    if view.campaigns.loaded
                      - var campaign = view.campaigns.get(course.get('campaignID'))
                      if campaign
                        each level, levelIndex in campaign.getLevels().models
                          - var levelNumber = campaign.getLevelNumber(level.get('original'), levelIndex + 1)
                          option(value=level.get('slug'))
                            span
                              = levelNumber
                            span.spr
                              | . 
                            span
                              = level.get('name').replace('Course: ', '')
              a.play-level-button.btn.btn-lg.btn-primary
                span(data-i18n="courses.play_level")
            .clearfix
            
mixin course-info(course)
  - var campaign = view.campaigns.get(course.get('campaignID'));
  .course-info
    .text-h4.semibold
      = i18n(course.attributes, 'name')
    p= i18n(course.attributes, 'description')
    p.concepts.semibold
      span(data-i18n="courses.concepts_covered")
      | : 
      each concept in course.get('concepts')
        span(data-i18n="concepts." + concept)
        if course.get('concepts').indexOf(concept) !== course.get('concepts').length - 1
          span.spr ,
        
    if me.isTeacher() || view.ownedClassrooms.size() || me.isAdmin()
      //- Web dev courses use HTML and JavaScript, except web-dev-1 which doesn't have scripting
      - var courseSlug = course.get('slug') || '';
      if courseSlug === 'web-dev-1'
        a.guide-btn.btn.btn-primary(href=("/teachers/course-solution/" + course.id + "/javascript") data-course-id=course.id data-course-name=course.get('name') data-event-action="Classes Guides Guide JavaScript" class=(me.isTeacher() || me.isAdmin() ? '': 'disabled'))
          span(data-i18n="courses.view_guide_online")
          |  &mdash; HTML
      else if courseSlug.indexOf('web-dev') >= 0
        a.guide-btn.btn.btn-primary(href=("/teachers/course-solution/" + course.id + "/javascript") data-course-id=course.id data-course-name=course.get('name') data-event-action="Classes Guides Guide JavaScript" class=(me.isTeacher() || me.isAdmin() ? '': 'disabled'))
          span(data-i18n="courses.view_guide_online")
          |  &mdash; HTML / JavaScript
      else
        a.guide-btn.btn.btn-primary(href=("/teachers/course-solution/" + course.id + "/javascript") data-course-id=course.id data-course-name=course.get('name') data-event-action="Classes Guides Guide JavaScript" class=(me.isTeacher() || me.isAdmin() ? '': 'disabled'))
          span(data-i18n="courses.view_guide_online")
          |  &mdash; JavaScript
        a.guide-btn.btn.btn-primary(href=("/teachers/course-solution/" + course.id + "/python") data-course-id=course.id data-course-name=course.get('name') data-event-action="Classes Guides Guide Python" class=(me.isTeacher() || me.isAdmin() ? '': 'disabled'))
          span(data-i18n="courses.view_guide_online")
          |  &mdash; Python