{# Kavel bij een contact of relatie: de meters, daaronder alleen de kaart
   (kaart-app, &weergave=kaart). Alle details staan op de volledige kaartpagina (knop). De kaart stuurt de gegevens
   met postMessage ({type: 'kaveltoets', resultaat | fout}). #}
{% macro kaart_block(kaart) %}
<div class="card kavel"><div class="card-body">
  <div class="card-top"><h2>Kavel</h2>
    <div class="actions"><a class="btn btn-outline-primary btn-sm" href="{{ kaart }}" target="_blank" data-kavel-open>Volledig openen</a></div></div>
  <p class="muted" data-kavel-status style="margin:0 0 1rem">Kavel wordt opgezocht…</p>
  <dl class="kavel-meters" data-kavel-gegevens hidden>
    <div><dt>Kavel</dt><dd data-k="kavel_m2"></dd></div>
    <div><dt>Bebouwd</dt><dd data-k="bebouwd_m2"></dd></div>
    <div><dt>Vrij</dt><dd data-k="vrije_m2"></dd></div>
  </dl>
  <div class="kaart-frame"><iframe src="{{ kaart }}&amp;weergave=kaart" title="Kaart van de kavel" loading="lazy" data-kavel-frame></iframe></div>
</div></div>
<script>
(() => {
  const card = document.currentScript.previousElementSibling;
  const frame = card.querySelector('[data-kavel-frame]'), box = card.querySelector('[data-kavel-gegevens]');
  const status = card.querySelector('[data-kavel-status]'), open = card.querySelector('[data-kavel-open]');
  const k = (n) => card.querySelector(`[data-k="${n}"]`);
  const m2 = (n) => n == null ? '—' : `${Number(n).toLocaleString('nl-NL')} m²`;
  addEventListener('message', (e) => {
    if (e.origin !== location.origin || e.source !== frame.contentWindow || !e.data || e.data.type !== 'kaveltoets') return;
    if (e.data.fout) { status.textContent = e.data.fout; status.hidden = false; box.hidden = true; return; }
    const r = e.data.resultaat;
    status.hidden = true; box.hidden = false;
    ['kavel_m2', 'bebouwd_m2', 'vrije_m2'].forEach(n => { k(n).textContent = m2(r[n]); });
    if (r.link) open.href = r.link;
  });
})();
</script>
{% endmacro %}