{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Remote Access · Private Server{% endblock %}
{% block content %}
    {{ page_header('Remote Access', tabs=tabs, active_tab='private_server') }}
    <form method="post" action="{{ url_for('ra_private_server') }}" class="max-w-2xl space-y-4" data-dirty-track
          x-data="{ show: false }">
        <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 space-y-4">
            <label class="flex items-center gap-3"><input type="checkbox" name="enabled" {% if ps.enabled %}checked{% endif %} class="rounded text-indigo-600"><span>Enable Private Server connection</span></label>
            <div>
                <label class="block text-xs text-slate-500 mb-1">Endpoint</label>
                <input name="endpoint" value="{{ ps.endpoint }}" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
            </div>
            <div>
                <label class="block text-xs text-slate-500 mb-1">Authentication token</label>
                <div class="flex gap-2">
                    <input :type="show ? 'text' : 'password'" name="token" value="{{ ps.token }}" class="flex-1 rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono">
                    <button type="button" @click="show = !show" class="px-3 py-1.5 rounded-md border border-slate-200 dark:border-slate-700 text-sm" x-text="show ? 'Hide' : 'Show'"></button>
                </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-2">Connection</h3>
            <dl class="text-sm grid grid-cols-2 gap-y-2">
                <dt class="text-slate-500">Status</dt><dd class="flex items-center gap-2"><span class="h-2 w-2 rounded-full bg-emerald-500 dot-live text-emerald-500"></span>{{ ps.connection_status }}</dd>
                <dt class="text-slate-500">Clients</dt><dd>{{ ps.clients_connected }}</dd>
                <dt class="text-slate-500">Bytes transferred</dt><dd class="font-mono">{{ ps.bytes_transferred }}</dd>
            </dl>
        </div>

        <div class="flex justify-end"><button class="inline-flex items-center gap-2 btn-primary px-3 py-1.5 rounded-md text-sm"><i data-lucide="save" class="h-4 w-4"></i>Save</button></div>
    </form>
{% endblock %}