{% extends "base.html" %}

{% block content %}
<div class="row">
  <div class="span12">
    <h1>Result</h1>
    <p>The following diagram shows the different
      servers as boxes. The arrows represent the communication between the
      those servers. Below are some usefull details like the travel time of
      the e-mail, software used and so on.</p>

    <img id="graph" src="/image/{{ token }}">

    <div class="panel panel-default">
      <div class="panel-heading">Some interesting details about this e-mail</div>

      <table class="table table-striped table-bordered table-hover">
        <tbody>
          <tr>
            <td><strong>Sender</strong></td>
            <td>{{ from }}</td>
          </tr>
          <tr>
            <td><strong>Receiver</strong></td>
            <td>{{ to }}</td>
          </tr>
          <tr>
            <td><strong>Travel time</strong></td>
            <td>
              {% if traveltime %}
              <span class="label label-{% if traveltime > 5 %}danger{% else
                           %}success{% endif %}">{{ traveltime }}</span> seconds
              {% else %}
              Timing is not accurate enough for measurement
              {% endif %}

            </td>
          </tr>
          {% if mailer %}
          <tr>
            <td><strong>Sender software</strong></td>
            <td>{{ mailer }}</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
    
    <br>

    <h3>The analyzed e-mail header</h3>
    <pre>{{ mailheader }}</pre>
  </div>
</div>
{% endblock %}