{% macro status_badge(status) %}
  {% set cls = {'pending':'badge-ghost','approved':'badge-success','non_trip':'badge-neutral',
                'skipped':'badge-warning','merged':'badge-info','split':'badge-info'} %}
  <span class="badge badge-sm {{ cls.get(status, 'badge-ghost') }}">{{ status }}</span>
{% endmacro %}

{% macro confidence_badge(confidence) %}
  {% if confidence < 0.4 %}
    <span class="badge badge-sm badge-warning" title="needs your eye">low</span>
  {% elif confidence < 0.75 %}
    <span class="badge badge-sm badge-info">med</span>
  {% else %}
    <span class="badge badge-sm badge-success">high</span>
  {% endif %}
{% endmacro %}

{% macro lightbox() %}
<div id="lb" class="fixed inset-0 z-50 bg-black/95 flex items-center justify-center" style="display:none">
  <button class="absolute top-4 right-4 btn btn-circle btn-sm btn-ghost text-white"
          @click="closeLightbox()">&#10005;</button>
  <button class="absolute left-3 top-1/2 -translate-y-1/2 btn btn-circle btn-ghost text-white text-4xl"
          @click="navigate(-1)">&#8249;</button>
  <button class="absolute right-3 top-1/2 -translate-y-1/2 btn btn-circle btn-ghost text-white text-4xl"
          @click="navigate(1)">&#8250;</button>
  <div class="flex flex-col items-center gap-3 px-16 max-w-full">
    <img id="lb-img" src="" class="max-h-[80vh] max-w-[88vw] object-contain rounded-lg" alt="">
    <div class="text-white/40 text-xs">&larr; &rarr; navigate · Esc close</div>
  </div>
</div>
{% endmacro %}