{% extends "templates/web.html" %}

{% block title %}{{ _("Redirecting to Payment...") }}{% endblock %}

{% block page_content %}
<div class="container" style="text-align:center; padding: 4rem 1rem;">

  {% if error %}
  <div class="alert alert-danger" role="alert">
    <h4>{{ _("Payment Error") }}</h4>
    <p>{{ error }}</p>
    <a href="/" class="btn btn-secondary mt-2">{{ _("Return Home") }}</a>
  </div>
  {% else %}
  <div id="redirect-notice">
    <h3>{{ _("Redirecting to secure checkout&hellip;") }}</h3>
    <p class="text-muted">{{ _("Please wait while we connect to the payment processor.") }}</p>
    <div class="spinner-border text-primary mt-3" role="status" aria-label="Loading">
      <span class="visually-hidden">{{ _("Loading&hellip;") }}</span>
    </div>
  </div>
  <script>
    (function () {
      var url = {{ checkout_url | tojson }};
      if (url) {
        window.location.href = url;
      } else {
        document.getElementById("redirect-notice").innerHTML =
          '<div class="alert alert-danger">' +
          '<p>{{ _("Could not initialize payment. Please") }} <a href="mailto:support@performancewest.net">{{ _("contact support") }}</a>.</p>' +
          '<a href="/" class="btn btn-secondary mt-2">{{ _("Return Home") }}</a>' +
          '</div>';
      }
    })();
  </script>
  {% endif %}

</div>
{% endblock %}