{% extends "layout.html" %}
{% block content %}

<div>
    <h2 id="title" class="title">Sites <a href="/sitesscan" class="btn btn-default glyphicon glyphicon-refresh"></a>
    </h2>
    <a id="top" href="#title" class="btn btn-default glyphicon glyphicon-arrow-up pull-right" data-spy="affix-top"
       data-offset-top="197"></a>
</div>
<div class="col-sm-3">
    <ul id="sidebar" class="nav nav-stacked affix">
        {% for site in sites%}
        <li class="navbar-text">{{site.hostname}}
            {% for interface in site.interfaces%}
            <small><a href="#{{site.hostname}}{{interface.name}}">{{interface.name}}</a></small>
            {% endfor %}
        </li>
        {% endfor %}
    </ul>
</div>
<div class="col-sm-9">
    {% for site in sites%}
    {% for interface in site.interfaces %}
    <h4 id="{{site.hostname}}{{interface.name}}">{{site.hostname}} --> {{interface.name}}   <div class="pull-right">Hosts number: {{ interface.hosts |list|count}}</div></h4>
    <table class="table table-hover">
        <thead>
            <th>IP</th>
            <th>Hostname</th>
            <th>MAC</th>
            <th>Ports Open</th>
        </thead>
        <tbody>
        {% for host in interface.hosts%}
        <tr>
            <td>{{ host.ip }}</td>
            <td>{{ host.name_ptr}}</td>
            <td><a href="https://www.my-ip.club/oui-info/{{host.mac}}">{{ host.mac }}</a></td>
            <td>{{ host.ports| replace("[", "") |replace("]", "") }}</td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
    {% endfor %}
    {% endfor %}
</div>
<a id="bottom" href="#footer" class="btn btn-default glyphicon glyphicon-arrow-down pull-right" data-spy="affix-bottom"
   data-offset-top="205"></a>
{% endblock %}