{% extends "./base.html" %} {% load i18n %}

{% block "title" %}
<title>{% trans "Transaction More Info" %}</title>
{% endblock %}

{% block "content" %}
<section class="section receipt">
    {% if instructions is not none %}
    {# instructions came from Polaris' instructions_for_pending_deposit() #}
    <div class="info-item">
        <div class="info-label">
            {% trans "instructions" %}
        </div>
        <div class="field-value">
            {{ instructions|safe }}
        </div>
    </div>
    {% endif %}

    {# Instructions, if present, came from the anchor's more_info extension #}
    {# Note that the anchor's block must detect if instructions are necessary #}
    {# The anchor must determine the appropriate instructions (or none) from their own context #}

    {% block "instructions" %}
    {% endblock %}

    <div class="info-item">
        <div class="info-label">
            {% trans "kind" %}
        </div>
        <div class="field-value">
            {% if transaction.kind == "deposit" %}
                {% trans "deposit" %}
            {% else %}
                {% trans "withdrawal" %}
            {% endif %}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% trans "ID" %}
        </div>
        <div class="field-value">
            {{ transaction.id }}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% if transaction.status == "incomplete" or transaction.status == "pending_user_transfer_start" %}
              {% trans "amount to be received" %}
            {% else %}
              {% trans "amount received" %}
            {% endif %}
        </div>
        <div class="field-value">
            {{ amount_in }}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% trans "fee" %}
        </div>
        <div class="field-value">
            {{ amount_fee }}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% if transaction.kind == "deposit" %}
                {% trans "amount deposited" %}
            {% else %}
                {% trans "amount withdrawn" %}
            {% endif %}
        </div>
        <div class="field-value">
            {{ amount_out }}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% trans "status" %}
        </div>
        <div class="field-value">
            {{ transaction.message }}
        </div>
    </div>

    <div class="info-item">
        <div class="info-label">
            {% trans "start" %}
        </div>
        <div class="field-value">
            {{ transaction.started_at }}
        </div>
    </div>

    {% if transaction.status == "completed" %}
        <div class="info-item">
            <div class="info-label">
                {% trans "completed" %}
            </div>
            <div class="field-value">
                {{ transaction.completed_at }}
            </div>
        </div>
    {% endif %}

    <script type="text/javascript">
        // Anchors should send a POST or postMessage request with the the entire transaction
        // object, serialized by the server, in a transaction property (i.e., the value for
        // the "transaction" key).
        //
        // In other terms, the message should have the following structure:
        // tx_json = {
        //     "transaction": {
        //         "id": "fake-transaction-id",
        //         "status": "completed"
        //         etc.
        //     }
        // }
        var tx_json = JSON.parse('{{ tx_json|safe }}');
        var transaction = tx_json["transaction"];
        var callback = '{{ callback|safe }}'

        if (!callback || callback.toLowerCase() === 'postmessage') {
            postMessageCallback();
        } else {
            urlCallback();
        }

        // Callback function to post the serialized transaction to the wallet.
        function postMessageCallback() {
            var targetWindow;

            if (window.opener != void 0) {
                targetWindow = window.opener;
            } else if (window.parent != void 0) {
                targetWindow = window.parent;
            } else {
                return;
            }

            targetWindow.postMessage(tx_json, "*");
        }

        // Callback function to post the serialized transaction to the callback URL
        function urlCallback() {
            fetch(callback, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(tx_json)
            }).catch((e) => {
                console.error('POST request to specified callback failed. Attempting postMessage instead.', e);
                postMessageCallback();
            });
        }
    </script>
</section>
{% endblock %}
