{% 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.

            The label and the missing icon are both fixed by Apple's Tap to Pay on iPhone review
            guide, not by taste:

            * 5.4 -- the label must be one of the guide's localized strings. In English that is
              "Tap to Pay on iPhone" or "Tap to Pay", nothing else. "Tap to Pay on iPhone" is
              iPhone-only wording, so Android gets the short form.
            * 5.5 -- if the button carries an icon it must be SF Symbols' wave.3.right.circle(.fill).
              A Bootstrap credit-card glyph is not that, and the marketing rules separately forbid
              drawing our own Tap to Pay iconography, so there is no substitute glyph to reach for.
              The requirement is conditional on using an icon at all, so no icon means it does not
              apply -- which is also what the app does (see tapToPaySymbolAsset in the Flutter app).

            5.2 also asks that this be reachable without scrolling and, where there are several
            payment options, sit at the top of the list -- hence its position above the PayPal and
            Square QR block, which is hidden in-app anyway.
          {% endcomment %}
          <a href="fishauctions://pay/{{ invoice.pk }}" class="btn btn-primary btn-lg w-100 my-2">
            {% if request.is_ios_app %}Tap to Pay on iPhone{% else %}Tap to Pay{% endif %}
          </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>