{% load qr_code %}
<div class="container mt-4">
  {% if multiple_tos %}
    Multiple users found.  Use a more specific search term.
  {% else %}
    {% if tos %}
      {% if not invoice %}
        This user does not have an invoice
      {% else %}
        {% if invoice.unsold_lot_warning %}
          <div class="alert alert-warning fw-bold py-2 text-dark" role="alert">{{ invoice.unsold_lot_warning }}</div>
        {% endif %}
        {{ tos.name }} <span id="quick-checkout-invoice-summary">{{ invoice.invoice_summary_short }}</span> {% include 'invoice_buttons.html' %}<br>
        {% include "auctions/partials/invoice_membership_renewal.html" with is_admin=True %}
        {% if tos.is_club_member and tos.auction.uses_alternate_split %}<span class="badge bg-info ms-1 me-1" title="Alternate selling fees will be applied">{{ tos.auction.alternative_split_label|capfirst }}</span>{% endif %}
        {% if tos.memo %}Memo: {{ tos.memo }}<br>{% endif %}
        {% if tos.possible_duplicate %}Note: This user may be a duplicate, confirm that this is their only bidder number<br>{% endif %}
        {% if request.is_mobile_app and invoice.show_square_button and not invoice.reason_for_payment_not_available %}
          {% comment %}
            Inside the native app: deep-link to the on-device Tap to Pay screen (host must be "pay",
            first path segment the invoice pk). Gated on the same request.is_mobile_app UA check that
            hides the web navbar in base.html, plus invoice.show_square_button so the button only
            appears when the seller's Square account is actually linked and authorized (matching the
            Square QR check below and the create_mobile_payment seller/permission check). The
            scan-a-QR-code flow doesn't apply on the device itself, so we hide the QR section below
            and show only this native button in-app.
          {% endcomment %}
          <a href="fishauctions://pay/{{ invoice.pk }}" class="btn btn-primary btn-lg w-100 my-2">
            <i class="bi bi-credit-card-2-front"></i> Tap to Pay with card
          </a>
        {% endif %}
        {% if not request.is_mobile_app %}
        {% if paypal_qr_code_link or square_qr_code_link %}
          <div class="row justify-content-center my-2">
            {% if paypal_qr_code_link %}
            <div class="col-12 {% if square_qr_code_link %}col-lg-6{% else %}col-lg-4{% endif %} text-center">
              <style>
                #invoice_{{invoice.pk}}_paypal_qr_wrapper img { max-width: 100%; height: auto; }
              </style>
              <div id="invoice_{{invoice.pk}}_paypal_qr_wrapper" aria-label="PayPal Payment QR code">
                {% qr_from_text paypal_qr_code_link size="L" image_format="png" %}
                <span id="invoice_{{invoice.pk}}_paypal_qr_scan" class="d-block mb-2">Scan this code to pay with PayPal</span>
              </div>
            </div>
            {% endif %}
            {% if square_qr_code_link %}
            <div class="col-12 {% if paypal_qr_code_link %}col-lg-6{% else %}col-lg-4{% endif %} text-center">
              <style>
                #invoice_{{invoice.pk}}_square_qr_wrapper img { max-width: 100%; height: auto; }
              </style>
              <div id="invoice_{{invoice.pk}}_square_qr_wrapper" aria-label="Square Payment QR code">
                {% qr_from_text square_qr_code_link size="L" image_format="png" %}
                <span id="invoice_{{invoice.pk}}_square_qr_scan" class="d-block mb-2">Scan this code to pay with Square</span>
              </div>
            </div>
            {% endif %}
          </div>
        {% endif %}
        {% endif %}
        <a href="{{ invoice.get_absolute_url }}" target="_blank"><i class="bi bi-arrow-up-right-square-fill"></i> View or adjust invoice</a>
        {% comment %} Print invoice needs the browser print dialog, which the app WebView has no UI for. {% endcomment %}
        {% if not request.is_mobile_app %}
        <a href="{{ invoice.get_absolute_url }}?print" target="_blank"><i class="bi bi-printer-fill"></i> Print invoice</a>
        {% endif %}
      {% endif %}
    {% endif %}
  {% endif %}
</div>