{# Reusable SimpleX link box: a "Link" and a "QR" toggle button, both hidden by default.
   linkbtns(id)        — just the two toggle buttons (for table action cells)
   linkpanels(link,id) — the hidden link + QR containers (place where they can span)
   linkbox(link,id)    — buttons + panels together (for block contexts)
   `id` must be unique on the page. JS lives in base.html (sxToggleLink/sxToggleQr/sxCopy). #}

{% macro linkbtns(id) %}
  <button class="lb-btn" onclick="sxToggleLink('{{ id }}', this)"><i class="fa-solid fa-link"></i> Link</button>
  <button class="lb-btn" onclick="sxToggleQr('{{ id }}', this)"><i class="fa-solid fa-qrcode"></i> QR</button>
{% endmacro %}

{% macro linkpanels(link, id) %}
  <div id="lb-link-{{ id }}" class="lb-link" style="display:none;">
    <button class="btn btn-ghost copy-btn" title="Copy" onclick="sxCopy('{{ id }}', this)"><i class="fa-solid fa-copy"></i></button>
    <a class="addr-link" id="lb-url-{{ id }}" href="{{ link }}" target="_blank" rel="noopener">{{ link }}</a>
  </div>
  <div id="lb-qr-{{ id }}" class="lb-qr" style="display:none;"><canvas id="lb-qrc-{{ id }}"></canvas></div>
{% endmacro %}

{% macro linkbox(link, id) %}
  <div class="flex gap-8">{{ linkbtns(id) }}</div>
  {{ linkpanels(link, id) }}
{% endmacro %}