{% load staticfiles %}
{% load analysis_tags %}

<div class="flex-grid__horizontal flex-grid__fluid">

    {% if report.analysis.network.tcp %}

        <div class="flex-grid__column--md scroll-internal" id="requests">
                
                <ul class="source-destination">
                    <li class="title">TCP Requests</li>
                    <li class="content" tabindex="2">
                        <ul>
                             {% for p in report.analysis.network.tcp %}
                                <li>
                                    <a href="{{p.src}},{{p.sport}},{{p.dst}},{{p.dport}},tcp">
                                        <div class="flex-distribute">
                                            <span class="source">
                                                {{p.src}}:{{p.sport}}
                                            </span>
                                            <i class="fa fa-long-arrow-right"></i>
                                            <span class="destination">
                                                {{p.dst}}:{{p.dport}}
                                            </span>
                                        </div>
                                        {% if report.iplookups|get_item:p.dst %}
                                            <span class="destination-address">{{ report.iplookups|get_item:p.dst }}</span>
                                        {% endif %}
                                    </a>
                                </li>
                            {% endfor %}
                        </ul>
                    </li>
                </ul>
        </div>

        <div class="flex-grid__column scroll-internal">
            <div class="network-display__loader">
                {% include "components/loader.html" %}
            </div>
            <div class="network-display__outer" tabindex="3">
                <div class="network-display__requests" id="packets"></div>
            </div>
        </div>

    {% else %}

        <div class="flex-grid__column scroll-internal">
            <div class="network-display__outer no-content">
                <p>No traffic</p>
            </div>
        </div>

    {% endif %}

</div>