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

  h3 Available Courses
  
  for course in view.courses.models
    .media
      .pull-left
        img.media-object(src=course.get('screenshot'))
      .media-body
        h3.media-heading
          span.spr= course.get('name')
          if course.get('free')
            em (free!)
        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

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)