{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Remote Access · Overview{% endblock %}
{% block content %}
    {{ page_header('Remote Access', tabs=tabs, active_tab='overview') }}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
            <div class="text-xs uppercase tracking-wide text-slate-500">Active tunnels</div>
            <div class="mt-1 text-2xl font-semibold font-mono">{{ tunnel_count }}</div>
        </div>
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
            <div class="text-xs uppercase tracking-wide text-slate-500">Data transferred</div>
            <div class="mt-1 text-2xl font-semibold font-mono">{{ '%0.1f' % (private_server.bytes_transferred / 1048576) }} <span class="text-base text-slate-500">MB</span></div>
        </div>
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-4">
            <div class="text-xs uppercase tracking-wide text-slate-500">Clients connected</div>
            <div class="mt-1 text-2xl font-semibold font-mono">{{ private_server.clients_connected }}</div>
        </div>
    </div>
    <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5">
        <h3 class="font-semibold mb-4">Status</h3>
        <ul class="space-y-2 text-sm">
            <li class="flex items-center gap-2"><span class="h-2 w-2 rounded-full bg-emerald-500 dot-live text-emerald-500"></span>Private Server <span class="text-slate-500">· {{ private_server.connection_status }}</span></li>
            {% for t in tunnels %}<li class="flex items-center gap-2"><span class="h-2 w-2 rounded-full {% if t.status == 'up' %}bg-emerald-500 dot-live text-emerald-500{% else %}bg-slate-300{% endif %}"></span>SSH :{{ t.local_port }} → {{ t.remote_host }}:{{ t.remote_port }}</li>{% endfor %}
        </ul>
    </div>
{% endblock %}