{{define "body"}}
<main>
    <div class="c-section" style="margin-top: 25px;">
        <div class="c-section__content">
            {{if eq .payment.Status "open"}}
                <p class="t-p1">Processing payment <span class="js-loading" style="display: inline-block; width: 15px; text-align: left"></span></p>
            {{else}}
            <form action="/order/retry/{{.orderID}}" method="POST">
                <p class="t-p1">Your payment failed</p>
                <button style="margin-top: 50px"class="c-button">try again</button>
            </form>
            {{end}}
        </div>
    </div>
</main>

<script>
    {{if eq .payment.Status "open"}}
        var loading = document.querySelector('.js-loading')

        setInterval((function () {
            var times = 0
            return function () {
                times++
                var dots = ''
                for (i = 0; i < times % 4; i++) {
                    dots += '.'
                }

                loading.textContent = dots
            }
        })(), 200)
        setTimeout(function () {window.location.reload()}, 2000)
    {{end}}
</script>
{{end}}