<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{bug.ixBug|e}} | {{bug.sTitle|e}}</title>
  <style type="text/css">
    .bugHeader {
      outline-width: 2px;
      outline-style: solid;
      width: 90%;
      padding: 5px;
      background: #B8DDFF;
      font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    }
    .bugEvent {
      outline-width: 2px;
      outline-style: solid;
      outline-color: blue;
      width: 90%;
      padding: 5px;
      background: #D2E9FF;
      font: 12px Arial, Helvetica, sans-serif;
    }

    pre.s {
      white-space: pre-wrap;
    }
  </style>    
</head>
<body>
  <div class="bugHeader">
    <span class="ixBug">Bug ID: {{bug.ixBug|e}}</span><br>
    <span class="sTitle">Title: {{bug.sTitle|e}}</span><br>
    <span class="sPersonAssignedTo">Assigned To: {{bug.sPersonAssignedTo|e}}</span><br>
    <span class="sProject">Project: {{bug.sProject|e}}</span><br>
    <span class="sArea">Area: {{bug.sArea|e}}</span><br>
    <span class="sCategory">Category: {{bug.sCategory|e}}</span><br>
    <span class="sPriority">Title: {{bug.sPriority|e}}</span><br>
  </div>
  <div class="bugEvents">
    {% for event in bug.events %}
      <div class="bugEvent">
        <span class="ixBugEvent">BugEvent ID: {{event.ixBugEvent|e}}</span><br>
        <span class="dt">Date/Time: {{event.dt|e}}</span><br>
        <span class="sVerb">Verb: {{event.sVerb|e}}</span><br>
        <span class="evtDescription">Event Description: {{event.evtDescription|e}}</span><br>
        <span class="sChanges">Changes: {{event.sChanges|e}}</span><br>
        <span class="sPerson">Person: {{event.sPerson|e}}</span><br>
        <span class="Text">Text: </span><br>
        <pre class="s">{{event.s|e}}</pre><br>
        <pre class="s">{{event.attachment|e}}</pre><br>
      </div>
    {% endfor %}
  </div>
</body>
</html>
