{% extends "admin_base.html" %}
{% block extra_head %}
{{ super() }}
<link rel="stylesheet" href="{{ static_url('/static/css/services.css') }}">
{% endblock %}
{% macro breakdown(title, counts) %}
<div class="nodes-panel">
    <h3>{{ title }}</h3>
    {% if counts %}
    <dl class="nodes-breakdown">
        {% for name, total in counts.items() %}
        <dt>{{ name }}</dt>
        <dd>{{ total }}</dd>
        {% endfor %}
    </dl>
    {% else %}
    <p class="admin-text-muted">None yet.</p>
    {% endif %}
</div>
{% endmacro %}
{% block admin_content %}
<div class="admin-toolbar">
    <h2>Community nodes</h2>
    <form method="POST" action="/admin/nodes/killswitch" class="admin-inline-form" data-nodes-killswitch>
        <input type="hidden" name="enabled" value="{{ 'false' if enabled else 'true' }}">
        <span class="nodes-state {{ 'on' if enabled else 'off' }}" data-nodes-state>{{ 'Donation on' if enabled else 'Donation off' }}</span>
        <button type="submit" class="admin-btn {{ 'admin-btn-danger' if enabled else 'admin-btn-primary' }}">{{ 'Switch off' if enabled else 'Switch on' }}</button>
    </form>
</div>

<div id="nodes-root" data-nodes-root role="region" aria-label="Community node status" aria-live="polite">
    <div data-live="summary">
        {% if not pool.online %}
        <p class="nodes-banner" role="status">The nodes service is not running, so no donor can be connected right now. Start it on the <a href="/admin/services/nodes">service page</a>.</p>
        {% endif %}
        <div class="metric-cards">
            <div class="metric-card"><span class="metric-value">{{ pool.connected }}</span><span class="metric-label">Connected</span></div>
            <div class="metric-card"><span class="metric-value">{{ pool.capacity }}</span><span class="metric-label">Capacity</span></div>
            <div class="metric-card"><span class="metric-value">{{ queue.depth }} / {{ queue.max_depth }}</span><span class="metric-label">Queue depth</span></div>
            <div class="metric-card"><span class="metric-value">{{ pool.open_circuits }}</span><span class="metric-label">Open circuits</span></div>
            <div class="metric-card"><span class="metric-value">{{ pool.jobs_done }}</span><span class="metric-label">Jobs done</span></div>
            <div class="metric-card"><span class="metric-value">{{ pool.jobs_failed }}</span><span class="metric-label">Jobs failed</span></div>
            <div class="metric-card"><span class="metric-value">{{ pool.kicked }}</span><span class="metric-label">Kicked</span></div>
            <div class="metric-card"><span class="metric-value">{{ flags|length }}</span><span class="metric-label">Open flags</span></div>
        </div>
        <div class="nodes-grid">
            {{ breakdown("Devices by status", devices_by_status) }}
            {{ breakdown("Devices by kind", devices_by_kind) }}
            {{ breakdown("Devices by address class", devices_by_asn_class) }}
            {{ breakdown("Devices by country", devices_by_country) }}
            {{ breakdown("Requests", {"queued": queue.queued, "assigned": queue.assigned, "done": queue.done, "failed": queue.failed, "expired": queue.expired}) }}
            {{ breakdown("Today (UTC)", usage_today) }}
        </div>
    </div>

    <h3 class="nodes-heading">Open flags</h3>
    <div class="admin-table-wrap" data-live="flags">
    <table class="admin-table">
        <caption class="sr-only">Open node flags</caption>
        <thead>
            <tr>
                <th scope="col">Kind</th>
                <th scope="col">Owner</th>
                <th scope="col">Device</th>
                <th scope="col">Detail</th>
                <th scope="col">Raised</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for flag in flags %}
            <tr>
                <td>{{ flag.kind }}</td>
                <td>{% if flag.owner_username %}<a href="/profile/{{ flag.owner_username }}">{{ flag.owner_username }}</a>{% else %}-{% endif %}</td>
                <td>{{ flag.device_label or flag.device_uid or '-' }}</td>
                <td class="nodes-detail">{{ flag.detail or '-' }}</td>
                <td>{% if flag.created_at %}{{ local_dt(flag.created_at) }}{% else %}-{% endif %}</td>
                <td><button type="button" class="admin-btn admin-btn-sm" data-node-action="resolve-flag" data-uid="{{ flag.uid }}">Resolve</button></td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="admin-empty">No open flags.</td></tr>
            {% endfor %}
        </tbody>
    </table>
    </div>

    <h3 class="nodes-heading">Recent devices</h3>
    <div class="admin-table-wrap" data-live="devices">
    <table class="admin-table">
        <caption class="sr-only">Most recently seen node devices</caption>
        <thead>
            <tr>
                <th scope="col">Device</th>
                <th scope="col">Owner</th>
                <th scope="col">Status</th>
                <th scope="col">Kind</th>
                <th scope="col">Region</th>
                <th scope="col">Last seen</th>
                <th scope="col">Action</th>
            </tr>
        </thead>
        <tbody>
            {% for device in devices %}
            <tr>
                <td>{{ device.label or device.uid }}<small class="admin-text-muted">{{ device.platform }} {{ device.client_version }}</small></td>
                <td>{% if device.owner_username %}<a href="/profile/{{ device.owner_username }}">{{ device.owner_username }}</a>{% else %}-{% endif %}</td>
                <td>
                    <span class="nodes-status {{ device.status }}">{{ device.status }}</span>
                    {% if device.status == 'suspended' and device.suspend_reason %}<small class="admin-text-muted">{{ device.suspend_reason }}</small>{% endif %}
                </td>
                <td>{{ device.kind }}</td>
                <td>{{ device.country or '-' }} <small class="admin-text-muted">{{ device.asn_class }}</small></td>
                <td>{% if device.last_seen_at %}{{ local_dt(device.last_seen_at) }}{% else %}-{% endif %}</td>
                <td>
                    {% if device.status == 'suspended' %}
                    <button type="button" class="admin-btn admin-btn-sm" data-node-action="unsuspend" data-uid="{{ device.uid }}">Unsuspend</button>
                    {% elif device.status == 'active' %}
                    <button type="button" class="admin-btn admin-btn-sm" data-node-action="suspend" data-uid="{{ device.uid }}" data-label="{{ device.label or device.uid }}">Suspend</button>
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr><td colspan="7" class="admin-empty">No devices registered yet.</td></tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
</div>

<h3 class="nodes-heading">Settings</h3>
<form method="POST" action="/admin/nodes/settings" class="nodes-settings" data-nodes-settings aria-label="Community node settings">
    {% for field in settings %}
    <div class="admin-field">
        <label for="node-setting-{{ field.key }}">{{ field.label }}</label>
        {% if field.kind == 'flag' %}
        <select id="node-setting-{{ field.key }}" name="{{ field.key }}" class="admin-select">
            <option value="0" {% if field.value == '0' %}selected{% endif %}>Off</option>
            <option value="1" {% if field.value == '1' %}selected{% endif %}>On</option>
        </select>
        {% else %}
        <input type="number" id="node-setting-{{ field.key }}" name="{{ field.key }}" min="0" max="{{ field.ceiling }}" value="{{ field.value }}">
        <small class="admin-text-muted">Default {{ field.default }}, maximum {{ field.ceiling }}</small>
        {% endif %}
    </div>
    {% endfor %}
    <button type="submit" class="admin-btn admin-btn-primary">Save settings</button>
</form>

<div id="node-suspend-modal" class="modal-overlay">
    <div class="modal">
        <div class="modal-header">
            <h3 id="node-suspend-title">Suspend device</h3>
            <a href="#" class="modal-close" aria-label="Close dialog">&times;</a>
        </div>
        <form id="node-suspend-form" method="POST" class="modal-body" aria-labelledby="node-suspend-title">
            <label for="node-suspend-minutes">Minutes (1 to 10080)
                <input type="number" id="node-suspend-minutes" name="minutes" min="1" max="10080" value="60" required aria-required="true">
            </label>
            <label for="node-suspend-reason">Reason
                <input type="text" id="node-suspend-reason" name="reason" maxlength="500">
            </label>
            <div class="modal-actions">
                <button type="submit" class="admin-btn admin-btn-danger">Suspend</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}