{% extends "base.html" %}
{% load static %}
{% block title %}Dashboard - RadiusForge{% endblock %}
{% block content %}
{% static 'radiusforge/icons.svg' as icons %}
    <div class="rf-page-head">
        <div>
            <h1>Dashboard</h1>
            {% if organization %}<p class="rf-lede">Everything on this page is for <strong>{{ organization.name }}</strong>.</p>{% endif %}
        </div>
        {% if can_write %}<a class="button" href="{% url 'subscriber-create' %}">Add subscriber</a>{% endif %}
    </div>

    <section class="rf-status-grid" aria-label="System status">
        {% for c in cards %}
        <div class="rf-status-card rf-status-{{ c.level }}">
            <span class="rf-status-icon">{% if c.level == "ok" %}<svg class="rf-icon" aria-hidden="true"><use href="{{ icons }}#check"></use></svg>{% elif c.level == "info" %}<svg class="rf-icon" aria-hidden="true"><use href="{{ icons }}#info"></use></svg>{% else %}<svg class="rf-icon" aria-hidden="true"><use href="{{ icons }}#alert"></use></svg>{% endif %}</span>
            <div>
                <p class="rf-status-title">{{ c.title }}</p>
                <p class="rf-status-detail">{{ c.detail }}</p>
                {% if c.command %}<code class="rf-status-command">{{ c.command }}</code>{% endif %}
            </div>
        </div>
        {% endfor %}
    </section>

    <section class="rf-kpis" aria-label="Key figures">
        <div class="rf-kpi">
            <p class="rf-kpi-label">Subscribers</p>
            <p class="rf-kpi-value">{{ subscriber_total }}</p>
            <p class="rf-kpi-note">{{ subscriber_active }} active, {{ subscriber_suspended }} suspended</p>
        </div>
        <div class="rf-kpi">
            <p class="rf-kpi-label">Online now</p>
            <p class="rf-kpi-value">{{ online_count }}</p>
            <p class="rf-kpi-note">{{ online_summary }}</p>
        </div>
        <div class="rf-kpi">
            <p class="rf-kpi-label">Logins today</p>
            <p class="rf-kpi-value">{{ logins_today }} <span class="rf-kpi-unit">accepted</span></p>
            <p class="rf-kpi-note">{% if refused_today %}<a class="rf-kpi-warn" href="{% url 'connection-log' %}">{{ refused_today }} refused</a>{% else %}None refused{% endif %}</p>
        </div>
        <div class="rf-kpi">
            <p class="rf-kpi-label">Data used this week</p>
            <p class="rf-kpi-value">{{ week_down }}</p>
            <p class="rf-kpi-note">down, and {{ week_up }} up</p>
        </div>
    </section>

    <section class="rf-chart-grid">
        <div class="rf-panel">
            <div class="rf-panel-head">
                <h2>Logins, last 7 days</h2>
                <div class="rf-legend"><span><span class="rf-key rf-key-a"></span>Accepted</span><span><span class="rf-key rf-key-b"></span>Refused</span></div>
            </div>
            <div class="rf-bars" aria-hidden="true">
                {% for b in login_bars %}
                <div class="rf-bar-col" title="{{ b.day }}: {{ b.a }} accepted, {{ b.r }} refused">
                    <div class="rf-bar-pair">
                        <span class="rf-bar rf-bar-a" style="height: {{ b.ah }}px"></span>
                        <span class="rf-bar rf-bar-b" style="height: {{ b.rh }}px"></span>
                    </div>
                    <span class="rf-bar-label">{{ b.day }}</span>
                </div>
                {% endfor %}
            </div>
            <table class="rf-visually-hidden">
                <caption>Logins per day, last 7 days</caption>
                <tr><th>Day</th><th>Accepted</th><th>Refused</th></tr>
                {% for b in login_bars %}<tr><td>{{ b.day }}</td><td>{{ b.a }}</td><td>{{ b.r }}</td></tr>{% endfor %}
            </table>
        </div>
        <div class="rf-panel">
            <div class="rf-panel-head">
                <h2>Data used, last 7 days</h2>
                <span class="rf-legend">Download, GB</span>
            </div>
            <div class="rf-bars" aria-hidden="true">
                {% for b in data_bars %}
                <div class="rf-bar-col" title="{{ b.day }}: {{ b.size }} downloaded">
                    <span class="rf-bar-value mono">{{ b.gb }}</span>
                    <span class="rf-bar rf-bar-a rf-bar-wide" style="height: {{ b.h }}px"></span>
                    <span class="rf-bar-label">{{ b.day }}</span>
                </div>
                {% endfor %}
            </div>
            <table class="rf-visually-hidden">
                <caption>Data downloaded per day, last 7 days</caption>
                <tr><th>Day</th><th>Downloaded</th></tr>
                {% for b in data_bars %}<tr><td>{{ b.day }}</td><td>{{ b.size }}</td></tr>{% endfor %}
            </table>
        </div>
    </section>

    <section class="rf-dash-grid">
        <div class="rf-panel">
            <div class="rf-panel-head">
                <h2>Recent login attempts</h2>
                <a href="{% url 'connection-log' %}">See all</a>
            </div>
            {% if recent %}
            <ul class="rf-attempts">
                {% for r in recent %}
                <li>
                    <span class="rf-primary">{{ r.who }}</span>
                    {% if r.ok %}<span class="rf-pill rf-pill-active">Accepted</span>{% else %}<span class="rf-pill rf-pill-suspended">Refused</span>{% endif %}
                    <span class="rf-attempt-when mono">{{ r.when|date:"d M H:i" }}</span>
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="rf-empty">No login attempts yet.</p>
            {% endif %}
        </div>
        <div class="rf-panel">
            <div class="rf-panel-head">
                <h2>Top users this week</h2>
                <a href="{% url 'top-users' %}">Full report</a>
            </div>
            {% if top_users %}
            <ul class="rf-top-users">
                {% for u in top_users %}
                <li>
                    <div class="rf-top-row"><span class="rf-primary">{{ u.name }}</span><span class="mono rf-muted">{{ u.data }}</span></div>
                    <div class="rf-meter"><span style="width: {{ u.width }}%"></span></div>
                    {% if u.plan %}<p class="rf-top-plan">{{ u.plan }}</p>{% endif %}
                </li>
                {% endfor %}
            </ul>
            {% else %}
            <p class="rf-empty">No sessions recorded this week.</p>
            {% endif %}
        </div>
    </section>
{% endblock %}