{% extends "layout.html" %}
{% set active = 'kalibrasi' %}
{% block title %}Kalibrasi Sasaran{% endblock %}

{% block content %}
<h1 class="page-header mb-1">Kalibrasi Sasaran</h1>
<p class="text-inverse text-opacity-50 mb-3">Tentukan posisi sasaran di layar kamera. Tersimpan dan langsung dipakai saat sesi.</p>

{% if perlu %}
<div class="alert alert-warning"><i class="bi bi-exclamation-triangle me-2"></i>
    Sasaran <b>{{ perlu }}</b> belum dikalibrasi. Kalibrasi dulu di bawah ini sebelum memulai sesi.</div>
{% endif %}

<div class="row g-3">
    <div class="col-lg-8">
        <div class="card"><div class="card-header fw-bold d-flex align-items-center">
            <i class="bi bi-camera-video text-theme me-2"></i>Kamera IR
            <span class="badge bg-inverse bg-opacity-15 ms-auto" id="cam-status">memuat…</span>
        </div>
        <div class="card-body p-2">
            <div id="wrap" style="position:relative;line-height:0;min-height:320px;
                        background:#0b1017;border-radius:.4rem;">
                <img src="{{ url_for('video_feed') }}" id="feed"
                     style="width:100%;height:auto;display:block;border-radius:.4rem;">
                <canvas id="ov" style="position:absolute;left:0;top:0;cursor:crosshair;"></canvas>
            </div>
            <div class="mt-2" id="instruksi">Pilih jenis sasaran yang akan dikalibrasi di panel kanan.</div>
        </div></div>
    </div>

    <div class="col-lg-4">
        <div class="card mb-3"><div class="card-body">
            <h6 class="mb-2"><i class="bi bi-camera-video text-theme me-1"></i>Sumber Kamera</h6>
            <select class="form-select mb-2" id="kamera"><option>memuat…</option></select>
            <div class="d-grid">
                <button class="btn btn-outline-theme btn-sm" onclick="pilihKamera()">
                    <i class="bi bi-check2 me-1"></i>Pakai kamera ini</button>
            </div>
            <div class="text-inverse text-opacity-50 small mt-2" id="kamera-info"></div>
        </div></div>

        <div class="card mb-3"><div class="card-body">
            <h6 class="mb-3">Status Kalibrasi</h6>
            <div class="d-flex align-items-center mb-2">
                <i class="bi bi-record-circle me-2"></i>Baja (Popper)
                <span class="badge ms-auto {{ 'bg-theme' if status.baja else 'bg-danger' }}" id="st-baja">
                    {{ 'Tersimpan' if status.baja else 'Belum' }}</span>
            </div>
            <div class="d-flex align-items-center">
                <i class="bi bi-bullseye me-2"></i>Sasaran Kertas
                <span class="badge ms-auto {{ 'bg-theme' if status.kertas else 'bg-danger' }}" id="st-kertas">
                    {{ 'Tersimpan' if status.kertas else 'Belum' }}</span>
            </div>
        </div></div>

        <div class="card mb-3"><div class="card-body d-grid gap-2">
            <button class="btn btn-outline-theme" onclick="mulai('baja')" id="b-baja">
                <i class="bi bi-record-circle me-1"></i>Kalibrasi Baja <small class="text-inverse text-opacity-50">[B]</small></button>
            <button class="btn btn-outline-theme" onclick="mulai('kertas')" id="b-kertas">
                <i class="bi bi-bullseye me-1"></i>Kalibrasi Kertas <small class="text-inverse text-opacity-50">[K]</small></button>
            <button class="btn btn-inverse btn-sm" onclick="batal()">Batalkan [Esc]</button>
        </div></div>

        <div class="card mb-3 d-none" id="baja-zones"><div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <h6 class="mb-0"><i class="bi bi-record-circle text-theme me-1"></i>Popper</h6>
                <span class="text-inverse text-opacity-50 small ms-2" id="baja-count">0 popper</span>
            </div>
            <div id="baja-list" class="small"></div>
            <p class="text-inverse text-opacity-50 small mt-2 mb-2">
                Klik <b>pusat</b> lalu <b>tepi</b> di kamera untuk menambah popper. Atur
                <b>device</b> (ESP32) &amp; <b>channel</b> (servo) tiap popper.</p>
            <div class="d-grid gap-2">
                <button class="btn btn-theme btn-sm" onclick="simpanZonaBaja()">
                    <i class="bi bi-save me-1"></i>Simpan Popper</button>
            </div>
        </div></div>

        <div class="card mb-3"><div class="card-body">
            <label class="form-label mb-1">Mode Deteksi Laser</label>
            <select class="form-select form-select-sm mb-3" id="laser-mode" onchange="setLaserMode()">
                <option value="auto">Auto (IR untuk tablet, Hijau untuk webcam)</option>
                <option value="ir">IR / titik paling terang (kamera IR)</option>
                <option value="hijau">Laser Hijau (warna) — webcam biasa</option>
            </select>

            <div class="d-flex align-items-center mb-2">
                <span class="fw-600">Threshold Laser</span>
                <span class="badge bg-inverse bg-opacity-15 ms-auto" id="thr-val">200</span>
            </div>
            <input type="range" class="form-range" id="thr" min="0" max="255" value="200">
            <div class="text-inverse text-opacity-50 small">
                Geser sampai titik laser terdeteksi stabil & minim noise. Shortcut: <b>+</b>/<b>-</b>.
            </div>
        </div></div>

        <div class="card mb-3 d-none" id="green-card"><div class="card-body">
            <div class="fw-600 mb-2"><i class="bi bi-palette text-theme me-1"></i>Warna Laser Hijau</div>
            <div class="alert alert-warning py-2 px-3 small d-none" id="green-expo"></div>
            <label class="form-label mb-1 small">Hue min <span id="hmin-val" class="badge bg-inverse bg-opacity-15">35</span></label>
            <input type="range" class="form-range" id="hmin" min="0" max="179" value="35">
            <label class="form-label mb-1 small">Hue max <span id="hmax-val" class="badge bg-inverse bg-opacity-15">90</span></label>
            <input type="range" class="form-range" id="hmax" min="0" max="179" value="90">
            <label class="form-label mb-1 small">Saturasi min <span id="smin-val" class="badge bg-inverse bg-opacity-15">60</span></label>
            <input type="range" class="form-range" id="smin" min="0" max="255" value="60">
            <div class="text-inverse text-opacity-50 small">
                Sempitkan rentang hue bila ada objek hijau lain yang ikut terdeteksi.
            </div>
        </div></div>

        <div class="card mb-3"><div class="card-body">
            <div class="d-flex align-items-center mb-2">
                <span class="fw-600"><i class="bi bi-crosshair text-theme me-1"></i>Uji Deteksi</span>
                <span class="badge bg-inverse bg-opacity-15 ms-auto" id="uji-status">nonaktif</span>
            </div>
            <div class="d-grid gap-2 mb-2">
                <button class="btn btn-outline-theme btn-sm" id="btn-uji" onclick="toggleUji()">
                    <i class="bi bi-play-fill me-1"></i>Mulai Uji Deteksi</button>
                <button class="btn btn-inverse btn-sm" onclick="resetUji()">
                    <i class="bi bi-arrow-counterclockwise me-1"></i>Reset Perkenaan</button>
            </div>
            <div id="uji-hasil" class="small text-inverse text-opacity-50">Belum ada perkenaan.</div>
            <div class="text-inverse text-opacity-50 small mt-1">
                Nyalakan lalu tembak laser ke sasaran untuk memastikan terdeteksi & masuk zona.
            </div>
        </div></div>

        <div class="d-grid gap-2">
            <a href="{{ url_for('sesi_baru') }}" class="btn btn-theme"><i class="bi bi-play-fill me-1"></i>Ke Sesi Baru</a>
            <button class="btn btn-inverse" onclick="tutupKamera()">Tutup Kamera</button>
        </div>
    </div>
</div>

{% block extra_scripts %}
<script>
const feed = document.getElementById('feed');
const ov = document.getElementById('ov');
const ctx = ov.getContext('2d');
let mode = null;      // 'baja' | 'kertas'
let pts = [];         // titik dalam koordinat tampilan (px)
let bajaZones = [];   // zona popper terkumpul (frame coords + meta), disimpan sekaligus
let bajaDevices = []; // device popper terdaftar (utk dropdown, dari /api/devices)

function fit() {
    if (feed.clientWidth > 0 && feed.clientHeight > 0) {
        ov.width = feed.clientWidth; ov.height = feed.clientHeight; redraw();
    }
}
window.addEventListener('resize', fit);
feed.addEventListener('load', fit);
// frame kamera bisa datang telat -> cek ukuran berkala di awal
let fitTries = 0;
const fitTimer = setInterval(function(){ fit(); if (++fitTries > 40) clearInterval(fitTimer); }, 500);

function setInstruksi(t) { document.getElementById('instruksi').innerHTML = t; }

async function mulai(m) {
    mode = m; pts = [];
    post("{{ url_for('api_kalibrasi_edit') }}", {target: m});  // sembunyikan overlay lama
    document.getElementById('baja-zones').classList.toggle('d-none', m !== 'baja');
    if (m === 'baja') {
        // muat device terdaftar (utk dropdown) + zona yang sudah ada
        try {
            bajaDevices = (await (await fetch("{{ url_for('api_devices') }}")).json()).devices || [];
        } catch (e) { bajaDevices = []; }
        try {
            const d = await (await fetch("{{ url_for('api_kalibrasi_zones') }}")).json();
            const defDev = bajaDevices.length ? bajaDevices[0].id : 1;
            bajaZones = (d.zones || []).map(function (z, i) {
                return {cx: z.cx, cy: z.cy, r: z.r, device_id: z.device_id || defDev,
                        channel: z.channel || (i + 1), label: z.label || ''};
            });
        } catch (e) { bajaZones = []; }
        renderBajaList();
        setInstruksi('<b>Baja:</b> klik <b>pusat</b> piringan lalu <b>tepi</b> untuk menambah popper. Ulangi untuk beberapa popper, lalu <b>Simpan Popper</b>.');
    } else {
        setInstruksi('<b>Kertas:</b> klik 4 sudut berurutan — kiri-atas, kanan-atas, kanan-bawah, kiri-bawah.');
    }
    redraw();
}
function batal() {
    mode = null; pts = []; redraw(); setInstruksi('Dibatalkan.');
    document.getElementById('baja-zones').classList.add('d-none');
    post("{{ url_for('api_kalibrasi_edit') }}", {target: null});
}

ov.addEventListener('click', function (e) {
    if (!mode) { setInstruksi('Pilih jenis sasaran dulu (tombol di kanan).'); return; }
    const r = feed.getBoundingClientRect();
    const x = e.clientX - r.left, y = e.clientY - r.top;
    pts.push([x, y]);
    redraw();
    if (mode === 'baja' && pts.length === 2) tambahZonaBaja();
    if (mode === 'kertas' && pts.length === 4) simpanKertas();
});

function toFrame(p) {
    // koordinat tampilan -> piksel frame asli
    return [p[0] / feed.clientWidth * feed.naturalWidth,
            p[1] / feed.clientHeight * feed.naturalHeight];
}
function fromFrame(cx, cy, r) {
    // frame -> koordinat tampilan (px)
    const sx = feed.clientWidth / (feed.naturalWidth || 1);
    const sy = feed.clientHeight / (feed.naturalHeight || 1);
    return [cx * sx, cy * sy, r * sx];
}

function redraw() {
    ctx.clearRect(0, 0, ov.width, ov.height);
    ctx.strokeStyle = '#3cd2a5'; ctx.fillStyle = '#3cd2a5'; ctx.lineWidth = 2;
    if (mode === 'baja') {
        // zona tersimpan
        bajaZones.forEach(function (z, i) {
            const d = fromFrame(z.cx, z.cy, z.r);
            ctx.beginPath(); ctx.arc(d[0], d[1], d[2], 0, 7); ctx.stroke();
            ctx.font = '13px sans-serif';
            ctx.fillText('#' + (i + 1) + ' ' + (z.label || ('ch' + z.channel)), d[0] - d[2], d[1] - d[2] - 4);
        });
        if (pts.length >= 1) { dot(pts[0]); }
        if (pts.length === 2) {
            const r = Math.hypot(pts[1][0]-pts[0][0], pts[1][1]-pts[0][1]);
            ctx.beginPath(); ctx.arc(pts[0][0], pts[0][1], r, 0, 7); ctx.stroke();
        }
    } else if (mode === 'kertas') {
        pts.forEach(function (p, i) { dot(p); label(p, i+1); });
        if (pts.length >= 2) {
            ctx.beginPath(); ctx.moveTo(pts[0][0], pts[0][1]);
            for (let i=1;i<pts.length;i++) ctx.lineTo(pts[i][0], pts[i][1]);
            if (pts.length===4) ctx.closePath();
            ctx.stroke();
        }
    }
}
function dot(p){ ctx.beginPath(); ctx.arc(p[0],p[1],5,0,7); ctx.fill(); }
function label(p,n){ ctx.font='14px sans-serif'; ctx.fillText(n, p[0]+8, p[1]-8); }

async function post(url, body) {
    const r = await fetch(url, {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify(body)});
    return r.json();
}
function tambahZonaBaja() {
    const c = toFrame(pts[0]), e = toFrame(pts[1]);
    const rad = Math.round(Math.hypot(e[0]-c[0], e[1]-c[1]));
    pts = [];
    if (rad < 15) {
        setInstruksi('⚠️ Radius terlalu kecil ('+rad+'px). Klik <b>pusat</b> lalu <b>tepi</b> yang lebih jauh.');
        redraw(); return;
    }
    const ch = bajaZones.length + 1;
    const defDev = bajaDevices.length ? bajaDevices[0].id : 1;
    bajaZones.push({cx: Math.round(c[0]), cy: Math.round(c[1]), r: rad,
                    device_id: defDev, channel: ch, label: ''});
    renderBajaList(); redraw();
    setInstruksi('Popper #' + bajaZones.length + ' ditambahkan. Tambah lagi atau <b>Simpan Popper</b>.');
}

function renderBajaList() {
    document.getElementById('baja-count').textContent = bajaZones.length + ' popper';
    const box = document.getElementById('baja-list');
    if (!bajaZones.length) { box.innerHTML = '<span class="text-inverse text-opacity-50">Belum ada. Klik di kamera untuk menambah.</span>'; return; }
    box.innerHTML = bajaZones.map(function (z, i) {
        return '<div class="d-flex align-items-center gap-1 mb-1">' +
            '<span class="badge bg-inverse bg-opacity-15">#' + (i+1) + '</span>' +
            devSelect(i, z.device_id) + chSelect(i, z.device_id, z.channel) +
            '<input placeholder="nama" value="' + (z.label||'') + '" class="form-control form-control-sm" onchange="bajaSet(' + i + ',\'label\',this.value)">' +
            '<button class="btn btn-sm btn-outline-danger" onclick="bajaDel(' + i + ')"><i class="bi bi-trash"></i></button>' +
            '</div>';
    }).join('');
}
function devSelect(i, sel) {
    if (!bajaDevices.length)
        return '<span class="text-inverse text-opacity-50 small">device? <a href="{{ url_for('setting') }}">daftar dulu</a></span>' +
               '<input type="hidden" value="' + sel + '">';
    var opts = bajaDevices.map(function (d) {
        var st = d.online ? '●' : '○';
        var chc = d.channel_count ? (' · ' + d.channel_count + 'ch') : '';
        return '<option value="' + d.id + '"' + (d.id == sel ? ' selected' : '') + '>' +
               st + ' ' + (d.name || ('Dev ' + d.id)) + chc + '</option>';
    });
    // kalau device zona tak ada di daftar (offline/terhapus), tetap tampilkan
    if (!bajaDevices.some(function (d) { return d.id == sel; }))
        opts.unshift('<option value="' + sel + '" selected>Dev ' + sel + ' (tak terdaftar)</option>');
    return '<select class="form-select form-select-sm" style="width:auto" onchange="bajaSet(' + i + ',\'device_id\',this.value)">' + opts.join('') + '</select>';
}
function chSelect(i, devId, sel) {
    var d = bajaDevices.filter(function (x) { return x.id == devId; })[0];
    var n = (d && d.channel_count) ? d.channel_count : 8;
    var opts = '';
    for (var c = 1; c <= n; c++) opts += '<option value="' + c + '"' + (c == sel ? ' selected' : '') + '>CH' + c + '</option>';
    if (sel > n) opts += '<option value="' + sel + '" selected>CH' + sel + '</option>';
    return '<select class="form-select form-select-sm" style="width:auto" onchange="bajaSet(' + i + ',\'channel\',this.value)">' + opts + '</select>';
}
function bajaSet(i, k, v) {
    bajaZones[i][k] = (k === 'label') ? v : parseInt(v) || 1;
    if (k === 'device_id') renderBajaList();   // segarkan opsi channel utk device baru
    if (k !== 'label') redraw();
}
function bajaDel(i) { bajaZones.splice(i, 1); bajaZones.forEach(function(z,j){ if(!z.label) z.channel=j+1; }); renderBajaList(); redraw(); }

async function simpanZonaBaja() {
    if (!bajaZones.length) { setInstruksi('⚠️ Belum ada popper. Klik di kamera dulu.'); return; }
    const res = await post("{{ url_for('api_kalibrasi_baja') }}", {zones: bajaZones});
    if (res.ok) {
        badge('st-baja');
        setInstruksi('✅ ' + bajaZones.length + ' popper tersimpan & langsung aktif.');
        mode = null; pts = []; redraw();
        document.getElementById('baja-zones').classList.add('d-none');
        post("{{ url_for('api_kalibrasi_edit') }}", {target: null});
    } else setInstruksi('Gagal: ' + (res.error || ''));
}
async function simpanKertas() {
    const fp = pts.map(toFrame);
    const res = await post("{{ url_for('api_kalibrasi_kertas') }}", {points:fp});
    if (res.ok) { badge('st-kertas'); setInstruksi('✅ Kalibrasi <b>Kertas</b> tersimpan & langsung aktif.'); mode=null; }
    else setInstruksi('Gagal: ' + (res.error||''));
}
function badge(id){ const b=document.getElementById(id); b.textContent='Tersimpan'; b.className='badge ms-auto bg-theme'; }

async function tutupKamera(){ await post("{{ url_for('api_kalibrasi_stop') }}", {}); location.href="{{ url_for('home') }}"; }

// --- threshold ---
const thr = document.getElementById('thr');
let thrTimer = null;
function setThr(v) {
    v = Math.max(0, Math.min(255, v));
    thr.value = v; document.getElementById('thr-val').textContent = v;
    clearTimeout(thrTimer);
    thrTimer = setTimeout(function(){ post("{{ url_for('api_kalibrasi_threshold') }}", {nilai: v}); }, 120);
}
thr.addEventListener('input', function(){ setThr(parseInt(thr.value)); });
// ambil threshold awal dari server
fetch("{{ url_for('api_kalibrasi_threshold_get') }}").then(r=>r.json()).then(function(d){
    thr.value=d.threshold; document.getElementById('thr-val').textContent=d.threshold; });

// --- sumber kamera ---
async function loadKamera() {
    const sel = document.getElementById('kamera');
    try {
        const d = await (await fetch("{{ url_for('api_kamera_list') }}")).json();
        const cur = d.current || {};
        let html = '';
        (d.tablet||[]).forEach(function(c){
            html += '<option value="tablet:'+c.id+'"'+(cur.type==='tablet'&&cur.id===c.id?' selected':'')+
                    '>Tablet IR — id '+c.id+' ('+c.label+')</option>';
        });
        (d.webcam||[]).forEach(function(c){
            html += '<option value="webcam:'+c.id+'"'+(cur.type==='webcam'&&cur.id===c.id?' selected':'')+
                    '>Webcam — '+c.label+'</option>';
        });
        sel.innerHTML = html || '<option>tak ada kamera terdeteksi</option>';
        let info = 'Terpilih: ' + (cur.type||'-') + ' id ' + (cur.id!==undefined?cur.id:'-');
        if ((d.webcam_names||[]).length)
            info += '. Kamera terpasang (urutan bisa beda): ' + d.webcam_names.join(', ') +
                    '. Pilih indeks lalu lihat preview untuk memastikan.';
        document.getElementById('kamera-info').textContent = info;
        if (d.laser_mode) document.getElementById('laser-mode').value = d.laser_mode;
        if (d.green_hsv) setGreenSliders(d.green_hsv);
        const expo = document.getElementById('green-expo');
        if (d.exposure_note) { expo.textContent = d.exposure_note; expo.classList.remove('d-none'); }
        else { expo.classList.add('d-none'); }
        updateGreenUI();
    } catch(e){ sel.innerHTML='<option>gagal memuat</option>'; }
}
async function setLaserMode() {
    const m = document.getElementById('laser-mode').value;
    await post("{{ url_for('api_kalibrasi_laser_mode') }}", {mode: m});
    setInstruksi('Mode deteksi laser: <b>'+m+'</b>.');
    updateGreenUI();
}

// --- warna laser hijau (HSV) ---
function updateGreenUI() {
    // tampilkan kartu HSV saat mode hijau (atau auto+sumber webcam)
    const mode = document.getElementById('laser-mode').value;
    const cur = document.getElementById('kamera').value || '';
    const show = mode === 'hijau' || (mode === 'auto' && cur.indexOf('webcam:') === 0);
    document.getElementById('green-card').classList.toggle('d-none', !show);
}
function setGreenSliders(g) {
    if (g.h_min !== undefined) { hmin.value = g.h_min; document.getElementById('hmin-val').textContent = g.h_min; }
    if (g.h_max !== undefined) { hmax.value = g.h_max; document.getElementById('hmax-val').textContent = g.h_max; }
    if (g.s_min !== undefined) { smin.value = g.s_min; document.getElementById('smin-val').textContent = g.s_min; }
}
const hmin = document.getElementById('hmin'), hmax = document.getElementById('hmax'),
      smin = document.getElementById('smin');
let hsvTimer = null;
function sendHsv() {
    clearTimeout(hsvTimer);
    hsvTimer = setTimeout(function () {
        post("{{ url_for('api_kalibrasi_green_hsv') }}",
             {h_min: parseInt(hmin.value), h_max: parseInt(hmax.value), s_min: parseInt(smin.value)});
    }, 150);
}
[[hmin, 'hmin-val'], [hmax, 'hmax-val'], [smin, 'smin-val']].forEach(function (p) {
    p[0].addEventListener('input', function () {
        document.getElementById(p[1]).textContent = p[0].value; sendHsv();
    });
});

// --- uji deteksi ---
let uji = false;
async function toggleUji() {
    uji = !uji;
    await post("{{ url_for('api_kalibrasi_uji') }}", {on: uji});
    document.getElementById('btn-uji').innerHTML = uji
        ? '<i class="bi bi-stop-fill me-1"></i>Stop Uji Deteksi'
        : '<i class="bi bi-play-fill me-1"></i>Mulai Uji Deteksi';
    document.getElementById('uji-status').textContent = uji ? 'AKTIF' : 'nonaktif';
}
async function resetUji() { await post("{{ url_for('api_kalibrasi_reset') }}", {}); }
setInterval(async function () {
    try {
        const t = await (await fetch("{{ url_for('api_kalibrasi_trial') }}")).json();
        const box = document.getElementById('uji-hasil');
        if (t.shots && t.shots.length) {
            box.innerHTML = 'Perkenaan (' + t.shots.length + '): ' +
                t.shots.map(function (v) { return '<span class="shot-badge' + (v > 0 ? '' : ' miss') + '">' + v + '</span>'; }).join('') +
                (t.popper_down ? ' <span class="badge bg-danger">popper ROBOH</span>' : '');
        } else {
            box.textContent = t.testing ? 'Menunggu perkenaan… tembak laser ke sasaran.' : 'Belum ada perkenaan.';
        }
    } catch (e) {}
}, 500);
async function pilihKamera() {
    const v = document.getElementById('kamera').value;
    const [type, id] = v.split(':');
    await post("{{ url_for('api_kamera_pilih') }}", {type: type, id: parseInt(id)});
    setInstruksi('Kamera diganti. Memuat ulang…');
    setTimeout(function(){ location.reload(); }, 600);  // restart preview dgn sumber baru
}
loadKamera();

// --- shortcut keyboard (mirip tool OpenCV) ---
document.addEventListener('keydown', function(e){
    if (e.target.tagName === 'INPUT') return;
    if (e.key === 'b' || e.key === 'B') mulai('baja');
    else if (e.key === 'k' || e.key === 'K') mulai('kertas');
    else if (e.key === 'Escape') batal();
    else if (e.key === '+' || e.key === '=') setThr(parseInt(thr.value)+5);
    else if (e.key === '-' || e.key === '_') setThr(parseInt(thr.value)-5);
});

// status kamera
setInterval(async function(){
    try { const s = await (await fetch("{{ url_for('api_state') }}")).json();
        document.getElementById('cam-status').textContent = 'kamera: ' + (s.cam || '-'); } catch(e){}
}, 1000);
</script>
{% endblock %}
{% endblock %}