{% extends 'django_omise/base.html' %}
{% load i18n %}
{% load static %}

{% block head_title %}{% trans 'Promptpay Checkout' %}{% endblock %}

{% block content %}
<div class="bg-gray-200 p-4 min-h-screen">
    <div class="container mx-auto p-4 sm:grid sm:grid-cols-3">
        <div></div>
        <div class="border bg-white rounded-lg p-4 lg:mx-10">
        {% with omise_source=charge.source.get_omise_object %}
            {% if omise_source.charge_status == 'pending' %}

                <h1 class="text-lg mb-4">{% trans 'Complete the payment with the QR code below.' %}</h1>

                <img src="{{ omise_source.scannable_code.image.download_uri }}" alt="Promptpay QR Code" class="border border-gray-200">
                <p class="text-center mt-4">{% trans 'Total' %}: {{ charge.human_amount }} {{ charge.currency }}</p>
            
            {% elif omise_source.charge_status == 'successful' %}

            <h1 class="text-xl">{% trans 'Payment completed' %}</h1>

            {% elif omise_source.charge_status == 'failed' %}

            <h1 class="text-xl">{% trans 'Payment failed' %}</h1>

            {% endif %}

        {% endwith %}
        </div>
        <div></div>

    </div>
</div>

<script>
    const charge = "{{ charge.id }}";
    const chargeStatusUrl = "{% url 'django_omise:charge_status_json' %}";
</script>
<script src="{% static 'django_omise/js/main.js' %}"></script>
<script src="{% static 'django_omise/js/promptpay.js' %}"></script>
{% endblock %}