codecombat/app/templates/editor/verifier/verifier-view.jade

extends /templates/base-flat

block content
  .container
    div.row(style="margin-top: 20px")
      div.col-sm-3
        p.alert.alert-success(style="padding: 5px")
          | Passed: #{view.passed}
      div.col-sm-3
        p.alert.alert-warning(style="padding: 5px")
          | Test Problem: #{view.problem}
      div.col-sm-3
        p.alert.alert-danger(style="padding: 5px")
          | Failed: #{view.failed}
      div.col-sm-3
        p.alert.alert-info(style="padding: 5px")
          | To Run: #{view.testCount - view.passed - view.problem - view.failed}

    if view.levelIDs 
      .progress
        .progress-bar.progress-bar-success(role="progressbar" style="width: #{100*view.passed/view.testCount}%")
        .progress-bar.progress-bar-warning(role="progressbar" style="width: #{100*view.problem/view.testCount}%")
        .progress-bar.progress-bar-danger(role="progressbar" style="width: #{100*view.failed/view.testCount}%")


    each test, id in view.tests
      - if (test.state == 'no-solution')
      -   continue;
      if test.level
        .pull-right
          - var last = test.level.get('slug') + view.linksQueryString 
          a.btn.btn-primary(href="/editor/verifier/" + last) Focus
          a.btn.btn-success(href="/play/level/" + last) Play
          a.btn.btn-warning(href="/editor/level/" + last) Edit
          a.btn.btn-default(data-target='#verifier-test-' + id, data-toggle="collapse") Toggle

        if !test.goals
          h2(style='color: orange')= test.level.get('name')
            small= ' in ' + test.language + ''
        else if test.isSuccessful()
          h2(style='color: green')= test.level.get('name')
            small= ' in ' + test.language + ''
        else
          h2(style='color: red')= test.level.get('name')
            small= ' in ' + test.language + ''  

        div.row(class=(test.isSuccessful() && id > 1 ? 'collapse' : 'collapse in'), id='verifier-test-' + id)
          div.col-xs-8
            if test.solution
              pre #{test.solution.source}
            else
              h4 Error Loading Test
              pre #{test.error}
          div.col-xs-4.well
            if test.goals
              if test.frames == test.solution.frameCount
                div(style='color: green') ✓ Frames: #{test.frames}
              else
                div(style='color: red') ✘ Frames: #{test.frames} vs #{test.solution.frameCount}

              each v,k in test.goals || []
                if !test.solution.goals
                  div(style='color: orange') ? #{k} (#{v.status})
                else if v.status == test.solution.goals[k]
                  div(style='color: green') ✓ #{k} (#{v.status})
                else
                  div(style='color: red') ✘ #{k} (#{v.status} vs #{test.solution.goals[k]})
            else
              h3 Pending....

            if test.error
                pre(style="color: red") #{test.error}
          
            if test.userCodeProblems.length
              h4(style="color: red") User Code Problems
              pre(style="color: red") #{JSON.stringify(test.userCodeProblems, null, 2)}

      else
        h1 Loading Level...

      // TODO: show last frame hash