{% load bootstrap_tags %}
<div class="change-card">
    <h2>Current Card</h2>
    <p class="lead">
        {% if request.user.customer.card_kind and request.user.customer.card_last_4 %}
            Current card on file is a <strong>{{ request.user.customer.card_kind }}</strong>
            ending in the digits <strong>{{ request.user.customer.card_last_4 }}</strong>.
        {% else %}
            You do not currently have a card on file.
        {% endif %}
    </p>
    
    {% if error %}
        <div class="alert alert-error">{{ error }}</div>
    {% endif %}
    
    <form action="{% url payments_ajax_change_card %}" class="form-horizontal ajax" data-replace-closest=".change-card" method="POST">
        {% csrf_token %}
        <payment key="{{ STRIPE_PUBLIC_KEY }}"></payment>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Update</button>
        </div>
    </form>
</div>

{% if request.is_ajax %}
<script type="text/javascript">
    $(function() {
        PaymentTag.replaceTags();
    });
</script>
{% endif %}
