<div class="whatsapp-account-add-fragment">
  {% if object.ok %}
    <img
      src="data:image/png;base64, {{ object.image_b64 }}"
      alt="WhatsApp QR code"
      style="
             display: block;
             width: 100%;
             max-width: 420px;
             height: auto;
             margin: 0 auto;
            " />
    {% if object.warning %}
      <p class="is-size-7" style="margin-top: 0.6rem;">{{ object.warning }}</p>
    {% endif %}
  {% else %}
    <article class="notification is-warning is-light" style="margin-bottom: 0;">
      <p><strong>WhatsApp QR Not Ready.</strong></p>
      <p>{{ object.error|default:"No Neonize pairing QR is available yet." }}</p>
      {% if object.warning %}
        <p style="margin-top: 0.45rem;">{{ object.warning }}</p>
      {% endif %}
      {% if object.pending %}
        <p class="is-size-7" style="margin-top: 0.5rem;">
          Waiting for Neonize QR event. This panel will refresh automatically.
        </p>
        <form
          hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
          hx-post="{{ detail_url }}"
          hx-target="closest .whatsapp-account-add-fragment"
          hx-swap="outerHTML"
          hx-trigger="load delay:1800ms">
          {% csrf_token %}
          <input type="hidden" name="device" value="{{ object.device|default:'GIA Device' }}" />
          <input type="hidden" name="refresh" value="1" />
        </form>
      {% endif %}
      {% if object.debug_lines %}
        <details open style="margin-top: 0.6rem;">
          <summary><strong>Runtime Debug</strong></summary>
          <button
            type="button"
            class="button is-small is-light"
            style="margin-top: 0.45rem; margin-bottom: 0.35rem;"
            onclick="navigator.clipboard.writeText(this.nextElementSibling.innerText); return false;">
            Copy debug
          </button>
          <article class="notification is-light" style="margin-top: 0.5rem; margin-bottom: 0;">
            <pre class="is-size-7" style="white-space: pre-wrap; margin: 0;">{% for line in object.debug_lines %}{{ line }}
{% endfor %}</pre>
          </article>
        </details>
      {% endif %}
    </article>
  {% endif %}
</div>
