{% extends "base.html" %}
{% block title %}Fonepay QR — Demo{% endblock %}

{% block topbar_extra %}
<a class="back" href="{% url 'payments:payments-home' %}">&larr; Home</a>
{% endblock %}

{% block content %}
<div class="card" style="max-width:600px; margin:0 auto;">
    <div class="card-title" style="display:flex; align-items:center; gap:.5rem;">
        <span class="swatch" style="width:7px; height:7px; border-radius:50%; background:var(--fonepay); display:inline-block;"></span>
        Fonepay QR — <code style="font-size:.82rem;">{{ order.order_id }}</code>
    </div>

    <p style="color:var(--muted); font-size:.9rem; margin-bottom:1.25rem;">
        Show the string below to the customer to scan (render it as a QR code in a real app).
    </p>

    <div class="qr-kind">Payment string</div>
    <div class="qr-box" style="min-height:auto; padding:1.1rem 1.25rem; display:block; text-align:left;">
        <code style="word-break:break-all; font-size:.83rem; color:var(--text);">{{ qr_message }}</code>
    </div>

    <hr class="ticket-divider">

    <p style="font-size:.83rem; color:var(--muted); margin-bottom:1.25rem;">
        Run <code style="font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.15rem .4rem; color:var(--text);">python manage.py monitor_fonepay</code> to watch for settlement.
    </p>

    <form method="post" action="{% url 'payments:payments-verify' order.id %}">
        {% csrf_token %}
        <button class="btn btn-fonepay btn-sm" type="submit">Check status now</button>
    </form>
</div>
{% endblock %}