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

{% block title %}Redirecting to Checkout…{% 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">Return Home</a>
    </div>
  {% else %}
    <div id="redirect-notice">
      <h3>Redirecting to secure checkout…</h3>
      <p>Please wait. You will be redirected to Stripe to complete your payment.</p>
      <div class="spinner-border text-primary" role="status" aria-label="Loading">
        <span class="visually-hidden">Loading…</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 contact support.</p>' +
            '<a href="/" class="btn btn-secondary">Return Home</a>' +
            '</div>';
        }
      })();
    </script>
  {% endif %}

</div>
{% endblock %}