codecombat/app/templates/courses/teacher-courses-view.jade

extends /templates/base

block content

  .text-center
    if me.isAnonymous() || !me.get('name')
      .welcome Welcome!
    else
      .welcome Welcome, #{me.get('name')}!


  .section-header Your Classes

  if view.classrooms.models.length > 0
    .container-fluid
      each classroom in view.classrooms.models
        +classroom(classroom)
  else
    .no-students No classes yet!

  .text-center
    button.btn.btn-lg.btn-success.uppercase.create-new-class create new class

  br
  .section-header Available Courses
  .container-fluid
    - var courses = view.courses.models;
    - var i = 0;
    while i < courses.length
      - var course = courses[i];
      - i++;
      .row
        .col-md-6
          +course-info(course)
        if i < courses.length
          - course = courses[i];
          - i++;
          .col-md-6
            +course-info(course)

block footer

mixin classroom(classroom)
  .row
    - var classMemberCount = classroom.get('members') ? classroom.get('members').length : 0;
    if classMemberCount > 0
      .col-md-8
        p
          span.spr.class-name= classroom.get('name')
          if classroom.get('aceConfig') && classroom.get('aceConfig').language === 'javascript'
            span.spr.class-name (JavaScript)
          else
            span.spr.class-name (Python)
          a.edit-classroom-small(data-i18n="courses.edit_settings", data-classroom-id="#{classroom.id}")
          .active-courses active courses
          - var courseInstances = view.courseInstances.where({classroomID: classroom.id});
          each courseInstance in courseInstances
            +course(courseInstance, classMemberCount)
    else
      .col-md-12
        p
          span.spr.class-name= classroom.get('name')
          if classroom.get('aceConfig') && classroom.get('aceConfig').language === 'javascript'
            span.spr.class-name (JavaScript)
          else
            span.spr.class-name (Python)
          a.edit-classroom-small(data-i18n="courses.edit_settings", data-classroom-id="#{classroom.id}")
        .no-students No students yet!
        .text-center
          a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') add students
        br
    if classMemberCount > 0
      .col-md-4.text-center
        .class-count= classMemberCount
        .active-courses(style='margin:6px;') students
        a.btn.btn-info.uppercase(href='/courses/#{classroom.id}') view/edit
  .row
    .col-md-12
      .divider

mixin course(courseInstance, classMemberCount)
  - var courseMemberCount = courseInstance.get('members') ? courseInstance.get('members').length : 0;
  if courseMemberCount > 0
    - var course = view.courses.get(courseInstance.get('courseID'));
    p
      .course-name= course.get('name')
      .course-enrolled #{courseMemberCount} / #{classMemberCount} students enrolled
      each concept in course.get('concepts')
        span.spr.course-concept(data-i18n="concepts." + concept)

mixin course-info(course)
  .media
    .corner-ribbon-container
      if course.get('free')
        .corner-ribbon.top-left.sticky.shadow.uppercase free
      img.media-object(src=course.get('screenshot'))
      .star-container
        if course.get('duration') === 1
          .star-text #{course.get('duration') || 0} hr
          .round-star-label
        else
          .star-text-big #{course.get('duration') || 0} hrs
          .round-star-label-big
    .media-body
      span.spr.course-name= course.get('name')
      p= course.get('description')
      p
        strong.spr Concepts:
        each concept in course.get('concepts')
          span(data-i18n="concepts." + concept)
          if course.get('concepts').indexOf(concept) !== course.get('concepts').length - 1
            span.spr ,
      p
        strong.spr Length:
        span #{course.get('duration') || 0} hours