{% extends 'oscar/checkout/preview.html' %}
{% load i18n static currency_filters %}

{% block checkout_nav %}
    {% include 'oscar/checkout/nav.html' with step=4 %}
{% endblock %}

{% block payment_method %}
    <div class=" col-sm-12">
        <div class="sub-header">
            <h2>Payment</h2>
        </div>
        <div class="well well-success">
            <p class="text-danger font-weight-bold" >Your order is not complete until you click the "Place order" button.</p>
            <div>
                <form method="post" action="" id="place_order_form">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="place_order" />
                    <div style="display:none">
                            {{ stripe_token_form.as_p }}
                    </div>
                    <input id='place-order' type="submit" value="{% translate "Place order" %}" data-loading-text="Placing order..." class="btn-block btn btn-primary btn-large" />
                </form>
            </div>
            <p>{{ order_total.incl_tax|currency }} will be debited from your bankcard.</p>
            <div class="alert-actions">
                <a href="{% url 'checkout:payment-method' %}" class="btn">Change payment details</a>
            </div>
        </div>
    </div>
{% endblock %}

{% block place_order %}
    <form method="post" action="" id="place_order_form">
        {% csrf_token %}
        <input type="hidden" name="action" value="place_order" />

        {% comment %}
            When submitting sensitive data on the payment details page (eg a bankcard)
            we don't want to save the data and so we pass the bound form to the preview
            template and render it in a hidden div. Then the payment information will
            get re-submitted when the user confirms the order.
        {% endcomment %}
        <div style="display:none">
            {% block hiddenforms %}
{#                {{ stripe_token_form.as_p }}#}
            {% endblock %}
        </div>

        <div class="form-actions clearfix">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-3 col-sm-offset-6 col-md-offset-9">
                     <button id='place-order' type="submit" class="btn btn-primary btn-large btn-block" data-loading-text="{% translate 'Placing order...' %}">{% translate "Place order" %}</button>
                </div>
            </div>
        </div>
    </form>
{% endblock place_order %}
