{#
  Template d'infos supplémentaires pour la thématique "cameras"
  À inclure dans followup_theme_graph.html.twig si theme == 'cameras'
  Nécessite que la variable JS "objects" soit disponible (données OSM ou importées)
  Nécessite que la variable stats.population soit transmise au template parent
#}
<div class="card mt-4">
    <div class="card-header">
        <i class="bi bi-camera-video"></i> Infos caméras&nbsp;: parc, ratios et coûts
    </div>
    <div class="card-body p-2">
        <div id="cameras-extra-info">
            <span class="text-muted">Chargement des statistiques caméras...</span>
        </div>
        <div class="mt-2 small text-muted">
            <i class="bi bi-info-circle"></i> Les coûts sont des ordres de grandeur indicatifs pour la vidéoprotection urbaine (hors maintenance lourde, hors infrastructure réseau).
        </div>
    </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    if (typeof objects !== 'undefined' && '{{ theme }}' === 'cameras') {
        const population = {{ stats.population|default(0) }};
        // Filtrer les caméras (OSM : man_made=surveillance ou surveillance:type=*)
        let cameras = objects.filter(obj => obj.tags && (obj.tags.man_made === 'surveillance' || obj.tags['surveillance:type']));
        let nbCameras = cameras.length;
        let ratio = population > 0 ? (nbCameras / population).toFixed(5) : '—';
        let coutInstall = nbCameras * 50000;
        let coutAnnuel = nbCameras * 100000;
        let total1an = coutInstall + coutAnnuel;
        let nbCamerasStr = nbCameras.toLocaleString('fr-FR', {minimumFractionDigits: 1, maximumFractionDigits: 1});
        let ratioStr = population > 0 ? (nbCameras / population).toLocaleString('fr-FR', {minimumFractionDigits: 1, maximumFractionDigits: 1}) : '—';
        let coutInstallStr = coutInstall.toLocaleString('fr-FR', {minimumFractionDigits: 1, maximumFractionDigits: 1});
        let coutAnnuelStr = coutAnnuel.toLocaleString('fr-FR', {minimumFractionDigits: 1, maximumFractionDigits: 1});
        let total1anStr = total1an.toLocaleString('fr-FR', {minimumFractionDigits: 1, maximumFractionDigits: 1});
        let html = '';
        html += `<div class='mb-3 p-2 border rounded bg-light'>
            <h5><i class='bi bi-camera-video'></i> Parc de caméras&nbsp;: synthèse</h5>
            <table class='table table-sm align-middle mb-0' style='max-width:700px;'>
                <tbody>
                    <tr><th><i class='bi bi-camera-video'></i> Caméras détectées</th><td class='text-end'><b>${nbCamerasStr}</b></td></tr>`;
        if (population > 0) {
            html += `<tr><th class='text-muted'>Caméras par habitant</th><td class='text-end'>${ratioStr}</td></tr>`;
        }
        html += `<tr><th><i class='bi bi-cash-coin'></i> Coût d'installation</th><td class='text-end'>${coutInstallStr} € <span title="Hypothèse : 50 000 € d'installation par caméra (matériel, pose, raccordement). Source : estimation marché public, presse spécialisée." style='cursor: help;'>❓</span></td></tr>`;
        html += `<tr><th><i class='bi bi-cash-coin'></i> Coût annuel services/abonnements</th><td class='text-end'>${coutAnnuelStr} € <span title="Hypothèse : 100 000 € par caméra et par an (maintenance, supervision, abonnements, stockage). Source : estimation marché public, presse spécialisée." style='cursor: help;'>❓</span></td></tr>`;
        html += `<tr><th><b>Total cumulé sur 1 an</b></th><td class='text-end'><b>${total1anStr} €</b></td></tr>`;
        html += `</tbody></table></div>`;
        document.getElementById('cameras-extra-info').innerHTML = html;
    }
});
</script>