<!DOCTYPE html>
<html>
  <head>
    <title>{{title}}</title>

    <style>body {margin: 0; padding: 0; font-family: Tahoma, Geneva, sans-serif;}
    .test_block {
    	border: 1px solid #666;
    	margin: 20px;
    	padding: 20px;
    	width: 95%;
    	background-color: #fcfcfc;
    }
    .test_block:hover {background-color: #f6f6f6;}
    h1, h2, h3, h4, h5 {margin: 0; padding: 0;}
    h1 {margin: 0 0 20px 0;}

    .icon {
    	float: left;
    	margin: 3px 5px 0 0;
    }

    table {width: 990px; font-size: 12px;}
    thead tr td {border-bottom: 1px solid #ddd; font-weight: bold;}
    .test_passed, .test_failed {margin: 30px 0;}
    .test_passed h3 {color: #009904; margin-bottom: 5px;}
    .test_failed h3 {color: #D23D24; margin-bottom: 5px;}
    ul {margin:0; list-style: none; font-size: 12px; padding: 0 0 0 20px;}
    li:before { content: "» ";}
    .test_required_params, .test_optional_params {margin-top: 30px;}
    h4 {margin-bottom: 5px; color: #001cc9;}
    </style>
  </head>
  <body>
    <div class="test_block">
      <h1 class="test_title">{{title}}</h1>

      {{#failed}}
      <div class="test_failed">
        <img src="/images/cancel.png" class="icon" />
        <h3>Failed {{failed}} of {{results.length}}</h3>
        <table>
          <thead>
            <tr>
              <td>Timbit</td>
              <td>URL</td>
              <td>HTTP Status</td>
              <td>Error Message</td>
            </tr>
          </thead>
          <tbody>
            {{#results}}
            {{#failed}}
            <tr>
              <td>{{timbit}}</td>
              <td><a href="{{href}}" target="_blank">{{href}}</a></td>
              <td>{{status}}</td>
              <td>{{error}}</td>
            </tr>
            {{/failed}}
            {{/results}}
          </tbody>
        </table>
      </div>
      {{/failed}}
      
      {{#passed}}      
      <div class="test_passed">
        <img src="/images/accept.png" class="icon" />
        <h3>Passed {{passed}} of {{results.length}}</h3>
        <table>
          <thead>
            <tr>
              <td>Timbit</td>
              <td>URL</td>
            </tr>
          </thead>
          <tbody>
            {{#results}}
            {{#passed}}
            <tr>
              <td>{{timbit}}</td>
              <td><a href="{{href}}" target="_blank">{{href}}</a></td>
            </tr>
            {{/passed}}
            {{/results}}
          </tbody>
        </table>
      </div>
      {{/passed}}
    
    </div>
  </body>
</html>