extends /templates/base

block content

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

  .container-fluid
    .row
      .col-md-2
      .col-md-8
        .well
          .text-center
            strong.uppercase Getting Started with Courses
          br
          .text-center
            a.btn.btn-info(href='/docs/HourofCodeGettingStartedGuide.pdf') Download Getting Started Guide [PDF]
          br
          ol
            li Create a new class by clicking the green "Create New Class" button below.
            li Once you've created a class, click the blue "Add Students" button.
            li You'll see student's progress below as they sign up and join your class.
          br
          .text-center
            strong Additional Resources
          ul
            li
              span.spr Complete our
              a.spr(href='/teachers/freetrial') Teacher Survey
              span to get 15 more hours of content for FREE for 2 months.
            li
              span.spr Visit our
              a.spr(href='http://discourse.codecombat.com/c/teachers') Teacher Forums
              span to connect to fellow educators who are using CodeCombat.

  .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
          button.btn.btn-info.uppercase.btn-add-students(data-classroom-id="#{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
    img.media-object(src=course.get('screenshot'))
    .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