{% extends 'commands.html' %}

{% set sidebar_state = 'disabled' %}
{% set btn_back = true %}

{% block content %}

<h2 class="mx-5 subhead-heading">{{_('Connected clients')}}</h2>

<div class="container mx-5">

{% for server_id, server_data in servers_data.items() %}
<div class="accordion card" id="shellAccordion">
    <div class="card-header" id="heading_1">
        <h2 class="mb-0">
            <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_{{ loop.index }}" aria-expanded="true" aria-controls="collapse_{{ loop.index }}">
                <h4>{{ server_data.name}}</h4>
            </button>
        </h2>
    </div>
    <div id="collapse_{{ loop.index }}" class="collapse show" aria-labelledby="heading_{{ loop.index }}">
        <div class="card-body">
            <table class="table table-hover">
                <thead class="thead-light">
                    <tr>
                        <th>{{ _('IP') }}</th>
                        <th>{{ _('Link speed') }}</th>
                        <th>{{ _('Details') }}</th>
                    </tr>
                </thead>

                <tbody data-target="cache-fieldset" id="cacheTable" class="text-left">
                    {% for client_data in server_data.clients %}
                    <tr data-toggle="fieldset-entry">
                        <td>{{ client_data.addr }}</td>
                        <td>
                            {% if client_data.speed >= 1000 %}
                                {{ (client_data.speed / 1000) | int }} Gb/s
                            {% else %}
                                {{ client_data.speed }} Mb/s
                            {% endif %}
                        </td>
                        <td><a href="{{ url_for('action_client_info', client_ip = client_data.addr) }}">{{ _('View details') }}</a></td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>
{% endfor %}

</div>

{% endblock %}