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

extends /templates/base

block content
  h3.text-right
    if me.isAnonymous()
      a(href="/teachers/signup")
        span(data-i18n="courses.teachers_click")
        span !
    else
      a(href="/courses/teachers")
        span(data-i18n="courses.teachers_click")
        span !

  #main-content
    if me.isAnonymous()

      h1.text-center(data-i18n="courses.welcome_to_courses")

      .text-center
        p
          h3(data-i18n="courses.ready_to_play")
        p
          button#start-new-game-btn.btn.btn-default(data-i18n="courses.start_new_game")
        p
          span.spr -
          span.text-uppercase(data-i18n="general.or")
          span.spl -
        p
          button#log-in-btn.btn.btn-default(data-i18n="login.log_in")

      h3#play-now-to-learn-header.text-center.text-uppercase(data-i18n="courses.play_now_learn_header")
      ul
        li(data-i18n="courses.play_now_learn_1")
        li(data-i18n="courses.play_now_learn_2")
        li(data-i18n="courses.play_now_learn_3")
        li(data-i18n="courses.play_now_learn_4")

    else

      - var showHOCComplete = false;
      if view.hocCourseInstance
        - var course = view.courses.get(view.hocCourseInstance.get('courseID'));
        - var campaign = view.campaigns.get(course.get('campaignID'));
        - var stats = campaign.statsForSessions(view.hocCourseInstance.sessions);
        - showHOCComplete = stats.levels.done && !view.classrooms.size();

      .text-center
        if !showHOCComplete
          h1(data-i18n="courses.welcome_to_page") Welcome to your Courses page!
        else
          h1(data-i18n="courses.completed_hoc")
          h2(data-i18n="courses.ready_for_more_header")
          ul.text-left
            li(data-i18n="courses.ready_for_more_1")
            li(data-i18n="courses.ready_for_more_2")
            li(data-i18n="courses.ready_for_more_3")
          a.btn.btn-lg.btn-success(href="/play") Play Now

      if view.hocCourseInstance && !view.classrooms.size()
        h3(data-i18n="courses.saved_games")
        hr

        .course-instance-entry
          h3
            span(data-i18n="courses.hoc")
            span.spr :
            span.spr(data-i18n="courses.course")
            span 1
            span.spr= (me.get('aceConfig') || {}).language === 'javascript' ? 'JavaScript' : 'Python'
            small
              a#change-language-link(data-i18n="courses.change_language")
          +course-instance-body(view.hocCourseInstance)
          .clearfix

      else if view.classrooms.size()
        h3.text-uppercase(data-i18n="courses.my_classes")
        hr

        for classroom in view.classrooms.models
          - var justAdded = classroom.id === view.classroomJustAdded;
          - var classroomClass = justAdded ? 'just-added' : '';
          if justAdded
            #just-added-text.text-center(data-i18n="courses.class_added")

          //- sigh
          div(class=classroomClass)
            h3
              span.spr= classroom.get('name')
              span.spr (#{(classroom.get('aceConfig') || {}).language === 'javascript' ? 'JavaScript' : 'Python'})
              a(href="/courses/"+classroom.id, data-i18n="courses.view_class")

            - var courseInstances = view.courseInstances.where({classroomID: classroom.id});
            for courseInstance in courseInstances

              .course-instance-entry
                - var course = view.courses.get(courseInstance.get('courseID'));
                h3
                  span.spr= course.get('name')
                  small
                    a(href="/courses/"+courseInstance.get('courseID')+'/'+courseInstance.id, data-i18n="courses.view_levels")
                +course-instance-body(courseInstance)
                .clearfix

      else
        .text-center
          button#start-new-game-btn.btn.btn-success.btn-lg(data-i18n="courses.start_new_game")

      h3.text-uppercase(data-i18n="courses.join_class")
      hr

      form#join-class-form.form-inline
        .help-block
          em(data-i18n="courses.ask_teacher_for_code")
        .form-group
          input#class-code-input.form-control(data-i18n="[placeholder]courses.enter_c_code", placeholder="<Enter Class Code>", value=view.classCode)
        input#join-class-button.btn.btn-default(type="submit", data-i18n="[value]courses.join", value="Join")

        if view.state === 'enrolling'
          .progress.progress-striped.active
            .progress-bar(style="width: 100%", data-i18n="courses.joining") Joining class

        if view.errorMessage
          .alert.alert-danger= view.errorMessage


  #begin-hoc-area.hide
    h3.text-center(data-i18n="common.loading")
    .progress.progress-striped.active
      .progress-bar(style="width: 100%")


mixin course-instance-body(courseInstance)
  - var course = view.courses.get(courseInstance.get('courseID'));
  - var campaign = view.campaigns.get(course.get('campaignID'));
  - var stats = campaign.statsForSessions(courseInstance.sessions);
  if stats.levels.done
    .text-success
      span.glyphicon.glyphicon-ok
      span.spl(data-i18n="courses.course_complete")
      span !
  .pull-right
    if stats.levels.done
      - var arenaLevel = stats.levels.arena;
      if arenaLevel
        - var arenaURL = "/play/ladder/"+arenaLevel.slug+"/course/"+courseInstance.id;
        a.btn.btn-warning.btn-lg(href=arenaURL)
          span(data-i18n="courses.play_arena")
      else
        a.btn.btn-default.btn-lg(disabled=true, data-i18n="courses.course_complete")
    else if courseInstance.sessions.size()
      - var lastLevel = stats.levels.lastPlayed;
      - var levelURL = "/play/level/"+lastLevel.slug+"?course="+courseInstance.get('courseID')+"&course-instance="+courseInstance.id;
      a.btn.btn-success.btn-lg(href=levelURL)
        span(data-i18n="common.continue")
    else
      - var firstLevel = stats.levels.first;
      - var levelURL = "/play/level/"+firstLevel.slug+"?course="+courseInstance.get('courseID')+"&course-instance="+courseInstance.id;
      a.btn.btn-info.btn-lg(href=levelURL)
        span(data-i18n="courses.start")

  div
    span(data-i18n="clans.playtime")
    span.spr :
    span= moment.duration(stats.playtime, 'seconds').humanize()

  if stats.levels.lastPlayed
    div
      span(data-i18n="courses.last_level")
      span.spr :
      span= stats.levels.lastPlayed.name

  .progress
    .progress-bar(style="width:"+stats.levels.pctDone)= stats.levels.pctDone