{% if existing_cards %}
	<legend>{{ text_credit_card }}</legend>
	<div class="form-horizontal">
	  <div id="choose-card" class="form-group">
		<label class="col-sm-2 control-label">{{ entry_card }}</label>
		<div class="col-sm-10">
		  <label class="radio-inline">
			<input type="radio" name="existing-card" value="1" checked="checked"/>
			{{ entry_card_existing }}
		  </label>
		  <label class="radio-inline">
			<input type="radio" name="existing-card" value="0"/>
			{{ entry_card_new }}
		  </label>
		</div>
	  </div>
	</div>
	<form id="payment-existing-form" action="{{ form_submit }}" method="post" class="form-horizontal">
	  <fieldset>
		<div id="card-existing">
		  <div class="form-group required">
			<label class="col-sm-2 control-label" for="token">{{ entry_cc_choice }}</label>
			<div class="col-sm-10">
			  <select name="token" data-worldpay="token" class="form-control">
				{% for existing_card in existing_cards %}
					<option value="{{ existing_card.token }}">{{ text_card_type }} {{ existing_card.type }}, {{ text_card_digits }} {{ existing_card.digits }}, {{ text_card_expiry }} {{ existing_card.expiry }}</option>
				{% endfor %}
			  </select>
			</div>
		  </div>
		  <div class="buttons clearfix">
			<div class="pull-right">
			  <input type="button" value="{{ button_delete_card }}" id="button-delete" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
			</div>
		  </div>
		  <div class="form-group required">
			<label class="col-sm-2 control-label" for="input-cc-cvc">{{ entry_cc_cvc }}</label>
			<div class="col-sm-10">
			  <input type="text" data-worldpay="cvc" value="" size="4" placeholder="{{ entry_cc_cvc }}" id="input-cc-cvc" class="form-control" />
			</div>
		  </div>
		</div>
	  </fieldset>
	  <div class="buttons">
		<div class="pull-right">
		  <input type="submit" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
		</div>
	  </div>
	</form>
	<form style="display: none" id="payment-new-form" action="{{ form_submit }}" method="post" class="form-horizontal">
  {% else %}
	  <form id="payment-new-form" action="{{ form_submit }}" method="post" class="form-horizontal">
	{% endif %}
	<fieldset>
	  <div class="form-group">
		<div class="col-sm-11" id='paymentDetailsHere' style="margin-left: 3%"></div>
	  </div>
	  {% if worldpay_card %}
		  <div class="form-group">
			<label class="col-sm-2 control-label" for="input-cc-save">{{ entry_card_save }}</label>
			<div class="col-sm-2">
			  <input type="checkbox" name="save-card" value=true id="input-cc-save"/>
			</div>
		  </div>
	  {% endif %}
	  </div>
	</fieldset>
	<div class="buttons">
	  <div class="pull-right">
		<input type="submit" value="{{ button_confirm }}" id="button-confirm" data-loading-text="{{ text_loading }}" class="btn btn-primary" />
	  </div>
	</div>
  </form>
  <div id="payment-errors">
  </div>
  <script type="text/javascript"><!--

      //Load Worldpay.js and run script functions
      $.getScript("{{ worldpay_script }}", function (data, textStatus, jqxhr) {
        Worldpay.setClientKey("{{ worldpay_client_key }}");

        // disable new card form if existing cards
{% if not existing_cards %}
	        $('#payment-new-form :input').prop('disabled', true);
{% endif %}

        // Set if token is reusable, remove first value when Worldpay update
        Worldpay.reusable = true;
{% if recurring_products %}
	        Worldpay.reusable = true;
{% else %}
	        $('input[name=\'save-card\']').on('change', function () {
	          if ($(this).is(':checked')) {
	            Worldpay.reusable = true;
	          } else {
	            Worldpay.reusable = false;
	          }
	        });
{% endif %}

        Worldpay.templateSaveButton = false;
        Worldpay.useTemplate('payment-new-form', 'paymentDetailsHere', 'inline', function (obj) {
          var _el = document.createElement('input');
          _el.value = obj.token;
          _el.type = 'hidden';
          _el.name = 'token';
          document.getElementById('payment-new-form').appendChild(_el);
		  document.getElementById('payment-new-form').submit();
        });

        //Submit form
        $('input[type=\'submit\']').on('click', function () {
          var existing = $('input[name=\'existing-card\']:checked').val();
          if (existing === '1') {
            var form = document.getElementById('payment-existing-form');
            Worldpay.useForm(form, function (status, response) {
              if (response.error || status != 200) {
                Worldpay.handleError(form, document.getElementById('payment-errors'), response.error);
              } else {
                form.submit();
              }
            }, true);
          } else {
            Worldpay.submitTemplateForm();
          }
        });
      });

      //Delete a card
      $('#button-delete').on('click', function () {
        var token = $('select[name=\'token\'] option:selected');

        if (confirm('{{ text_confirm_delete }}\n' + token.text())) {
          $.ajax({
            url: 'index.php?route=extension/payment/worldpay/deleteCard',
            type: 'post',
            data: {token: token.val()},
            dataType: 'json',
            beforeSend: function () {
              $('#button-delete').button('loading');
            },
            complete: function () {
              $('#button-delete').button('reset');
            },
            success: function (json) {
              if (json['error']) {
                alert(json['error']);
              }

              if (json['success']) {
                alert(json['success']);
                if (json['existing_cards']) {
                  token.remove();
                } else {
                  $('input[name=\'existing-card\'][value=0]').click();
                  $('#choose-card').remove();
                  $('#payment-existing-form').remove();
                }
              }
            }
          });
        }
      });

      // enable or disable forms based on exiting or new card option
      $('input[name=\'existing-card\']').on('change', function () {
        if (this.value === '1') {
          $('#payment-existing-form').show();
          $('#payment-new-form').hide();
          $('#payment-new-form :input').prop('disabled', true);
          $('#payment-existing-form :input').prop('disabled', false);
        } else {
          $('#payment-existing-form').hide();
          $('#payment-new-form').show();
          $('#payment-new-form :input').prop('disabled', false);
          $('#payment-existing-form :input').prop('disabled', true);
        }
      });
      //--></script>