{# invoice status buttons #}
{% if invoice %}
<script>
  if (!window.disableInvoiceButtonGroup) {
    window.disableInvoiceButtonGroup = function(el) {
      el.closest('[role=group]').querySelectorAll('button').forEach(function(b) { b.disabled = true; });
    };
  }
</script>
<div class="btn-group ms-1 me-1" id='invoice-buttons-{{invoice.pk}}' role="group" aria-label="Invoice status selection">
  <button type="button" id="{{invoice.pk}}_DRAFT" hx-post="/api/payinvoice/{{ invoice.pk }}/DRAFT" hx-target="#invoice-buttons-{{invoice.pk}}" hx-swap="outerHTML" onclick="disableInvoiceButtonGroup(this)" class="btn {% if invoice.status == 'DRAFT'%}btn-info{% else %}btn-secondary{% endif %}"><i class="bi bi-bag"></i> Open</button>
  {% if invoice.auction.show_invoice_ready_button %}
  <button type="button" id="{{invoice.pk}}_UNPAID" hx-post="/api/payinvoice/{{ invoice.pk }}/UNPAID" hx-target="#invoice-buttons-{{invoice.pk}}" hx-swap="outerHTML" onclick="disableInvoiceButtonGroup(this)" class="btn {% if invoice.status == 'UNPAID'%}btn-info{% else %}btn-secondary{% endif %}"><i class="bi bi-bag-check"></i> Ready</button>
  {% endif %}
  <button type="button" id="{{invoice.pk}}_PAID" hx-post="/api/payinvoice/{{ invoice.pk }}/PAID" hx-target="#invoice-buttons-{{invoice.pk}}" hx-swap="outerHTML" onclick="disableInvoiceButtonGroup(this)" class="btn {% if invoice.status == 'PAID'%}btn-success{% else %}btn-secondary{% endif %}"><i class="bi bi-bag-heart"></i> Paid</button>
</div>
{% endif %}