{% if communications %}

<div class="row">

  <div class="span12">

    <h2>Communications</h2>

    <table class="table table-hover table-condensed table-striped">

      <thead>

        <tr><th>From</th><th>To</th><th>Protocol</th><th>Port</th></tr>

      </thead>

      <tbody>

      {% for communication in communications %}

        <tr>

          <td><span class="badge" style="background-color: {{ communication.source_color }};">O</span> {{ communication.source }}</td>

          <td><span class="badge" style="background-color: {{ communication.destination_color }};">O</span> {{ communication.destination }}</td>

          <td>{{ communication.protocol }}</td>

          <td>{{ communication.port }}</td>

        </tr>

      {% endfor %}

      </tbody>

    </table>

  </div>

</div>

{% endif %}