{% extends 'base.html' %}
{% from '_partials/page_header.html' import page_header %}
{% block title %}Remote Access · Packet Capture{% endblock %}
{% block content %}
    {{ page_header('Remote Access', tabs=tabs, active_tab='packet_capture') }}
    <form method="post" action="{{ url_for('ra_packet_capture') }}"
          class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 mb-6">
        <input type="hidden" name="action" value="start">
        <h3 class="font-semibold mb-4">Start capture</h3>
        <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
            <div><label class="block text-xs text-slate-500 mb-1">Interface</label><select name="iface" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm"><option>eth0</option><option>wlan0</option><option>wg0</option></select></div>
            <div><label class="block text-xs text-slate-500 mb-1">Duration (s)</label><input type="number" name="duration_s" value="60" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm"></div>
            <div class="md:col-span-2"><label class="block text-xs text-slate-500 mb-1">BPF filter</label><input name="bpf" placeholder="tcp port 22" class="w-full rounded-md border-slate-300 dark:border-slate-700 dark:bg-slate-800 text-sm font-mono"></div>
        </div>
        <div class="mt-4 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="play" class="h-4 w-4"></i>Start capture</button></div>
    </form>

    <div class="rounded-lg border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 overflow-hidden">
        <div class="px-5 py-3 border-b border-slate-200 dark:border-slate-800"><h3 class="font-semibold">Recent captures</h3></div>
        <table class="w-full text-sm">
            <thead class="text-xs uppercase text-slate-500"><tr><th class="text-left px-5 py-2">Filename</th><th class="py-2 text-left">Interface</th><th class="py-2 text-left">Filter</th><th class="py-2 text-left">Size</th><th class="py-2 pr-5 text-right">Actions</th></tr></thead>
            <tbody>
                {% for j in jobs %}
                <tr class="border-t border-slate-100 dark:border-slate-800">
                    <td class="px-5 py-2 font-mono">{{ j.filename }}</td>
                    <td class="py-2 font-mono">{{ j.iface }}</td>
                    <td class="py-2 font-mono text-slate-500">{{ j.filter or '—' }}</td>
                    <td class="py-2">{{ j.size_kb }} KB</td>
                    <td class="py-2 pr-5 text-right">
                        <a href="#" onclick="window.toast('Download started (mock)'); return false;" class="text-xs px-2 py-1 rounded border border-slate-200 dark:border-slate-700">Download</a>
                        <form method="post" action="{{ url_for('ra_packet_capture') }}" class="inline"><input type="hidden" name="action" value="delete"><input type="hidden" name="job_id" value="{{ j.id }}"><button class="text-xs px-2 py-1 rounded text-red-600 hover:bg-red-50 dark:hover:bg-red-900/20">Delete</button></form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}