doctype html
html(lang="en")
  head
    title= "自动测试报告"
    meta(charset="utf-8")
    meta(http-equiv="X-UA-Compatible", content="IE=edge")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css")
    link(rel="stylesheet", href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css")
    link(rel="stylesheet", href="http://cdn.bootcss.com/mocha/2.0.1/mocha.css")
    style(type="text/css").
      * {
        font-family: "微软雅黑"
      }

      .case-snapshot {
        width: 100%;
      }

      .glyphicon {
        cursor: pointer;
      }
      a.glyphicon {
        color: #000;
      }

      #mocha {
        margin: 0;
      }
      #mocha-stats {
        width: 300px;
      }
      #mocha-stats li {
        width: 100px;
      }
      #mocha ul, #mocha li {
        margin: 10px 0 0 0;
      }
      #mocha .progress {
        display: none;
      }


  body
    nav.navbar.navbar-default.navbar-static-top(role="navigation")
      .container
        .navbar-header
          a.navbar-brand(href="#") Automation
        .collapse.navbar-collapse
          .nav.navbar-nav
            li.dropdown
              a(href="#", class="dropdown-toggle", data-toggle="dropdown") Tools
                span.caret
                ul(class="dropdown-menu", role="menu")
                  li
                    a(href="http://mochajs.org/", target="_blank") mocha
                  li
                    a(href="https://github.com/diydyq/mocha", target="_blank") mochaRunnerExtend
                  li.divider
                  li
                    a(href="https://github.com/diydyq/test-reporter", target="_blank") test-reporter
                  li
                    a(href="https://github.com/diydyq/jello-command-test", target="_blank") jello-command-test
    .container
      .jumbotron
        h1 自动测试报告
        p
          - var tS = moment(conf.summary.timeStart).format("YYYY-MM-DD HH:mm:ss")
          - var tE = moment(conf.summary.timeEnd).format("YYYY-MM-DD HH:mm:ss")
          - var tD = (conf.summary.timeEnd - conf.summary.timeStart)/1000.0 + " seconds"
          h4.row
            span.col-sm-2= "开始时间："
            span.col-sm-10= tS
          h4.row
            span.col-sm-2= "结束时间："
            span.col-sm-10= tE
          h4.row
            span.col-sm-2= "运行时间："
            span.col-sm-10= tD
          h4.row
            span.col-sm-2= "运行环境："
            span.col-sm-10= conf.browsers.join(", ")
      .row
        .col-sm-12
          table.table.table-striped.table-bordered.table-hover
            thead
              tr
                th= "序号"
                th= "URL"
                th.text-center= "Browser"
                th.text-center= "Suites"
                th.text-center= "Total"
                th.text-center= "Passed"
                th.text-center= "Pending"
                th.text-center= "Failed"
                th.text-center= "Duration"
                th.text-center= "Report"
            tbody
              -var cIndex = 1;
              each b, i in conf.browsers
                  each c, j in list
                    -var cHash = c.hash
                    -var cBrow = cHash[b]
                    -var cRsut = cBrow.result
                    -var cPage = cRsut.page
                    -var cJson = cRsut.json
                    -var cStat = cJson.stats
                    if cRsut.flag != true
                      tr.danger
                        td.col-sm-1= cIndex++
                        td.col-sm-3
                          a(href=cPage.name + conf.summary.htmlType)= c.url
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                        td.col-sm-1.text-center
                          span.glyphicon.glyphicon-list-alt(data-toggle="modal", data-target="#modal-report-#{i}-#{j}")  
                          span.glyphicon.glyphicon-picture(data-toggle="modal", data-target="#modal-snapshot-#{i}-#{j}")  
                          a.glyphicon.glyphicon-eye-open(href=c.http)
                    else if cStat.failures > 0
                      // case has failed test.
                      tr.warning
                        td.col-sm-1= cIndex++
                        td.col-sm-3
                          a(href=b + cPage.name + conf.summary.htmlType)= c.url
                        td.col-sm-1.text-center= b
                        td.col-sm-1.text-center= cStat.suites
                        td.col-sm-1.text-center= cStat.tests
                        td.col-sm-1.text-center= cStat.passes
                        td.col-sm-1.text-center= cStat.pending
                        td.col-sm-1.text-center= cStat.failures
                        td.col-sm-1.text-center(title="开始时间: #{cStat.start}, 结束时间: #{cStat.end}")= cStat.duration + " ms"
                        td.col-sm-1.text-center
                          span.glyphicon.glyphicon-list-alt(data-toggle="modal", data-target="#modal-report-#{i}-#{j}")  
                          span.glyphicon.glyphicon-picture(data-toggle="modal", data-target="#modal-snapshot-#{i}-#{j}") 
                          a.glyphicon.glyphicon-eye-open(href=c.http)
                    else
                      tr
                        td.col-sm-1= cIndex++
                        td.col-sm-3
                          a(href=b + cPage.name + conf.summary.htmlType)= c.url
                        td.col-sm-1.text-center= b
                        td.col-sm-1.text-center= cStat.suites
                        td.col-sm-1.text-center= cStat.tests
                        td.col-sm-1.text-center= cStat.passes
                        td.col-sm-1.text-center= cStat.pending
                        td.col-sm-1.text-center= cStat.failures
                        td.col-sm-1.text-center(title="开始时间: #{cStat.start}, 结束时间: #{cStat.end}")= cStat.duration + " ms"
                        td.col-sm-1.text-center
                          span.glyphicon.glyphicon-list-alt(data-toggle="modal", data-target="#modal-report-#{i}-#{j}")  
                          span.glyphicon.glyphicon-picture(data-toggle="modal", data-target="#modal-snapshot-#{i}-#{j}")  
                          a.glyphicon.glyphicon-eye-open(href=c.http)

      script(src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js")
      script(src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js")


// Dialog
each b, i in conf.browsers
    each c, j in list
      -var cHash = c.hash
      -var cBrow = cHash[b]
      -var cRsut = cBrow.result
      -var cPage = cRsut.page
      -var cJson = cRsut.json
      -var cStat = cJson.stats
      // report dialog
      div(class="modal fade", id="modal-report-#{i}-#{j}", tabindex="-1", role="dialog", aria-labelledby="myModalLabel", aria-hidden="true")
        .modal-dialog
          .modal-content
            .modal-header
            .modal-body
              !{cPage.pure}
            .modal-footer
      // snapshot dialog
      div(class="modal fade", id="modal-snapshot-#{i}-#{j}", tabindex="-1", role="dialog", aria-labelledby="myModalLabel", aria-hidden="true")
        .modal-dialog
          .modal-content
            .modal-header
            .modal-body
              div.text-center
                img.case-snapshot(src=b + cPage.name + conf.summary.shotType, width="500px")
            .modal-footer