{% load i18n %}

<form action="" id="payment-form-new" method="POST">
    <input type="hidden" name="token"/>
    <div class="group">
        <div class="credit-card-goup">
           <div class="card-element card-number-element">
               <label>{%trans "Card Number" %}</label>
               <div id="card-number-element" class="field my-input"></div>
           </div>
           <div class="row">
               <div class="col-xs-5 card-element card-expiry-element">
                   <label>{%trans "Expiry Date" %}</label>
                   <div id="card-expiry-element" class="field my-input"></div>
               </div>
               <div class="col-xs-3 col-xs-offset-4 card-element card-cvc-element">
                   <label>{%trans "CVC" %}</label>
                   <div id="card-cvc-element" class="field my-input"></div>
               </div>
           </div>
           <div class="card-element brand">
               <label>{%trans "Card Type" %}</label>
               <i class="pf pf-credit-card" id="brand-icon"></i>
           </div>
        </div>
    </div>
    <div id="card-errors"></div>
    {% if not messages and not form.non_field_errors %}
        <p class="card-warning-content">
            {% trans "You are not making any payment yet. After placing your order, you will be taken to the Submit Payment Page." %}
        </p>
    {% endif %}
    <div id='payment_error'>
        {% for message in messages %}
            {% if 'failed_payment' in message.tags or 'make_charge_error' in message.tags %}
                <ul class="list-unstyled">
                    <li><p class="card-warning-content card-warning-error">{{ message|safe }}</p></li>
                </ul>
            {% elif not form.non_field_errors %}
                <p class="card-warning-content">
                    {% trans "You are not making any payment yet. After placing your order, you will be taken to the Submit Payment Page." %}
                </p>
            {% endif %}
        {% endfor %}

        {% for error in form.non_field_errors %}
            <p class="card-warning-content card-warning-error">
                {{ error|escape }}
            </p>
        {% endfor %}
    </div>
    <div class="text-right">
        <button class="btn btn-vm-contact btn-wide" type="submit" name="payment-form">{%trans "SUBMIT" %}</button>
    </div>

    <div style="display:none;">
        <p class="payment-errors"></p>
    </div>
</form>