{% extends "base.html" %}
{% block title %}Top users - RadiusForge{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Top users</h1>
        </div>
        <a href="{% url 'connection-log' %}">View connection log</a>
    </div>
    <p class="hint">Your subscribers, ranked across all their recorded usage. Filtering by date is planned
       but not built yet.</p>

    <h2>By data used</h2>
    {% if by_bandwidth %}
    <table class="rf-cards">
        <thead>
            <tr><th>Username</th><th>Data used</th></tr>
        </thead>
        <tbody>
        {% for row in by_bandwidth %}
            <tr><td data-label="Username" class="rf-primary">{{ row.username }}</td><td data-label="Data used" class="mono">{{ row.total_gb }} GB</td></tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="rf-empty">No usage recorded yet.</p>
    {% endif %}

    <h2>By time online</h2>
    {% if by_time %}
    <table class="rf-cards">
        <thead>
            <tr><th>Username</th><th>Hours online</th></tr>
        </thead>
        <tbody>
        {% for row in by_time %}
            <tr><td data-label="Username" class="rf-primary">{{ row.username }}</td><td data-label="Hours online" class="mono">{{ row.total_hours }}</td></tr>
        {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p class="rf-empty">No usage recorded yet.</p>
    {% endif %}
{% endblock %}