{% extends "portal/base.html" %}
{% block title %}Your account{% endblock %}
{% block content %}
    <div class="rf-page-head">
        <div>
            <h1>Your account</h1>
            <p class="rf-lede">{{ subscriber.full_name|default:subscriber.username }}</p>
        </div>
    </div>

    {% if notice %}
    <ul class="rf-messages"><li class="rf-message rf-message-ok">{{ notice }}</li></ul>
    {% endif %}
    {% if page.notice %}
    <ul class="rf-messages"><li class="rf-message rf-message-error">{{ page.notice }}</li></ul>
    {% endif %}

    <section class="rf-panel">
        <div class="rf-panel-head">
            <h2>Your plan</h2>
            {% if page.active %}<span class="rf-pill rf-pill-active">{{ page.status }}</span>{% else %}<span class="rf-pill rf-pill-suspended">{{ page.status }}</span>{% endif %}
        </div>
        <ul class="rf-attempts">
            <li>{{ page.plan }}</li>
            <li>Speed: {{ page.speed }}</li>
            {% if directory %}
            <li class="rf-muted">{{ directory }}</li>
            {% else %}
            <li><a href="{% url 'portal-password' %}">Change password</a></li>
            {% endif %}
        </ul>
    </section>

    <section class="rf-panel">
        <div class="rf-panel-head"><h2>This period</h2></div>
        {# rf-top-users rows are blocks, so the bar gets the full width (in flex rows it collapsed to nothing). #}
        <ul class="rf-top-users">
            {% for line in page.usage %}
            <li>
                <div class="rf-top-row"><span>{{ line.label }}</span><span>{{ line.text }}</span></div>
                {% if line.percent is not None %}<div class="rf-meter" role="img" aria-label="{{ line.percent }}% used"><span style="width: {{ line.percent }}%"></span></div>{% endif %}
            </li>
            {% endfor %}
        </ul>
    </section>

    {# Step P2 (2 Oct 2026). No router names or addresses, and only the customer's own wording (apps/portal/activity.py). #}
    <section class="rf-panel">
        <div class="rf-panel-head"><h2>Online now</h2></div>
        {% if online %}
        <ul class="rf-attempts">
            {% for line in online %}
            <li>
                <div>
                    <strong>{{ line.headline }}</strong>
                    <p class="rf-top-plan">{{ line.detail }}</p>
                </div>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="rf-muted">You're not connected at the moment.</p>
        {% endif %}
    </section>

    <section class="rf-panel">
        <div class="rf-panel-head"><h2>Recent connection attempts</h2></div>
        {% if attempts %}
        <ul class="rf-attempts rf-portal-attempts">
            {% for attempt in attempts %}
            <li>
                {% if attempt.connected %}<span class="rf-pill rf-pill-active">Connected</span>{% else %}<span class="rf-pill rf-pill-suspended">Refused</span>{% endif %}
                {% if attempt.why %}<span class="rf-attempt-why">{{ attempt.why }}</span>{% endif %}
                <span class="rf-attempt-when">{{ attempt.when }}</span>
            </li>
            {% endfor %}
        </ul>
        {% else %}
        <p class="rf-muted">No connection attempts yet.</p>
        {% endif %}
    </section>
    <p class="rf-muted">Times are shown in {{ zone }}.</p>
{% endblock %}