{% load static i18n l10n sekizai_tags %}

{% addtoblock "js" %}<script src="https://js.stripe.com/v2/" type="text/javascript"></script>{% endaddtoblock %}
{% addtoblock "js" %}<script src="{% static 'shop/js/angular-stripe.js' %}" type="text/javascript"></script>{% endaddtoblock %}

{% addtoblock "js" %}<script src="{% static 'shop/js/stripe.js' %}" type="text/javascript"></script>{% endaddtoblock %}
{% add_data "ng-requires" "django.shop.stripe" %}
{% addtoblock "ng-config" %}['stripeProvider', function(stripeProvider) { stripeProvider.setPublishableKey('{{ SHOP_STRIPE_PUBKEY }}'); }]{% endaddtoblock %}

<div class="card">
{% block card_heading %}
	<div class="card-header">
		<h5 class="card-title my-0">
			{% trans "Payment" %}
			<img class="pull-right my-auto" src="{% static 'shop/icons/stripe-solid-dark.png' %}" srcset="{% static 'shop/icons/stripe-solid-dark.png' %} 1x, {% static 'shop/icons/stripe-solid-dark@2x.png' %} 2x, {% static 'shop/icons/stripe-solid-dark@3x.png' %} 3x" width="119" height="26" style="margin-top: -4px;">
		</h5>
	</div>
{% endblock card_heading %}
	<div class="card-body">
		<form role="form" name="stripe_card_form" stripe-card-form novalidate{% if SHOP_STRIPE_PREFILL %} ng-init="payment={card: {name: 'John Doe', number: '4242 4242 4242 4242', exp_month: '01', exp_year: '2020', cvc: '123'}}"{% endif %}>
			<div class="form-row">
				<div class="col form-group">
					<label for="card_holder">{% trans "Card Holder" %}</label>
					<div class="input-group">
						<input id="id_holder" type="text" class="form-control" name="holder" placeholder="{% trans 'Card holder name' %}" ng-model="payment.card.name" ng-required="true" />
						<div class="input-group-append">
							<span class="input-group-text"><i class="fa fa-user"></i></span>
						</div>
					</div>
					<ul ng-show="stripe_card_form.holder.$touched" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.holder.$error.required" class="invalid">{% trans "This field is required." %}</li>
						<li ng-show="stripe_card_form.holder.$valid" class="valid"></li>
					</ul>
					<ul ng-show="stripe_card_form.holder.$pristine" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.holder.$error.rejected" class="invalid" ng-bind="stripe_card_form.holder.$message"></li>
					</ul>
				</div>
			</div>
			<div class="form-row">
				<div class="col form-group">
					<label for="card_number">{% trans "Creditcard Number" %}</label>
					<div class="input-group">
						<input id="id_number" type="text" class="form-control" name="number" placeholder="Valid Card Number" ng-model="payment.card.number" ng-required="true" ng-pattern="/^[0-9 ]{16,}$/" />
						<div class="input-group-append">
							<div class="input-group-text">
								<i class="fa fa fa-cc-visa mr-1"></i>
								<i class="fa fa fa-cc-mastercard"></i>
							</div>
						</div>
					</div>
					<ul ng-show="stripe_card_form.number.$dirty" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.number.$error.required" class="invalid">{% trans "This field is required." %}</li>
						<li ng-show="stripe_card_form.number.$valid" class="valid"></li>
					</ul>
					<ul ng-show="stripe_card_form.number.$pristine" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.number.$error.rejected" class="invalid" ng-bind="stripe_card_form.number.$message"></li>
					</ul>
				</div>
			</div>
			<div class="form-row">
				<div class="col-6 form-group">
					<label>{% trans "Expiration Date" %}</label>
					<div class="w-100 d-flex">
						<select id="id_exp_month" class="form-control w-50 d-inline-flex mr-1" name="exp_month" ng-model="payment.card.exp_month" ng-required="true">
							<option value="" selected="selected" disabled="disabled">{% trans "Month" %}</option>
						{% for mm, month_name in payment_modifiers.month_range %}
							<option value="{{ mm }}">{{ mm }} / {{ month_name }}</option>
						{% endfor %}
						</select>
						<select id="id_exp_year" class="form-control w-50 d-inline-flex ml-1" name="exp_year" ng-model="payment.card.exp_year" ng-required="true">
							<option value="" selected="selected" disabled="disabled">{% trans "Year" %}</option>
						{% for year in payment_modifiers.years_range %}
							<option value="{{ year|unlocalize }}">{{ year|unlocalize }}</option>
						{% endfor %}
						</select>
						<ul ng-show="stripe_card_form.exp_month.$touched && stripe_card_form.exp_year.$touched" class="djng-form-control-feedback djng-field-errors" ng-cloak>
							<li ng-show="stripe_card_form.exp_month.$valid && stripe_card_form.exp_year.$valid" class="valid"></li>
						</ul>
						<ul ng-show="stripe_card_form.exp_month.$pristine || stripe_card_form.exp_year.$pristine" class="djng-form-control-feedback djng-field-errors" ng-cloak>
							<li ng-show="stripe_card_form.exp_month.$error.rejected" class="invalid" ng-bind="stripe_card_form.exp_month.$message"></li>
							<li ng-show="stripe_card_form.exp_year.$error.rejected" class="invalid" ng-bind="stripe_card_form.exp_year.$message"></li>
						</ul>
					</div>
				</div>
				<div class="col form-group offset-md-3">
					<label for="cvc">{% trans "Security Code" %}</label>
					<div class="input-group">
						<input id="id_cvc" type="password" class="form-control" name="cvc" placeholder="CVC" ng-model="payment.card.cvc" ng-required="true" ng-pattern="/^[0-9]{3,}$/" autocomplete="off" />
						<div class="input-group-append">
							<div class="input-group-text"><i class="fa fa-credit-card"></i></div>
						</div>
					</div>
					<ul ng-show="stripe_card_form.cvc.$touched" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.cvc.$error.required" class="invalid">{% trans "This field is required." %}</li>
						<li ng-show="stripe_card_form.cvc.$valid" class="valid"></li>
					</ul>
					<ul ng-show="stripe_card_form.cvc.$pristine" class="djng-form-control-feedback djng-field-errors" ng-cloak>
						<li ng-show="stripe_card_form.cvc.$error.rejected" class="invalid" ng-bind="stripe_card_form.cvc.$message"></li>
					</ul>
				</div>
			</div>
		</form>
	</div>
</div>