{% extends team.id+'/base.html' %}

{% block title %}Processing...{% endblock %}
{% block description %}{% endblock %}

{% block content %}<style>
.spinner-orange { color: #ff8800; width: 3rem; height: 3rem; }
.bank-logos img { opacity: 0.5; filter: grayscale(1); margin: 0 10px; }
</style>

<div class="loader-container text-center">
    <div class="spinner-border spinner-orange mb-4" role="status">
        <span class="visually-hidden">Processing...</span>
    </div>

    <h1 class="fw-bold text-uppercase">Processing your payment</h1>
    <p class="text-muted">
         We are securely connecting to your banking service. Please do not close this window.</p>

    <div class="bank-logos mt-5">
        <img src="https://cdn-icons-png.flaticon.com/512/196/196578.png" height="30" alt="Visa">
        <img src="https://cdn-icons-png.flaticon.com/512/196/196561.png" height="30" alt="Mastercard">
        <img src="https://cdn-icons-png.flaticon.com/512/39/39142.png" height="30" alt="American Express">
    </div>
    <div class="mt-4">
        <span class="badge bg-light-subtle text-dark border">
            <i class="bi bi-lock-fill me-1"></i> 256-bit SSL encryption
        </span>
    </div>
</div>

<script>
    localStorage.setItem('{{team.id}}_checkout', JSON.stringify({{data|safe}}));

    setTimeout(function() {
        window.location.href = '{{url_for('store.cart_completed', team_id=team.id)}}';
    }, 3500);
</script>
{% endblock %}