<xf:css src="payment_initiate.less" />
<xf:js src="xf/payment.js" min="1" />

<xf:title>{{ phrase('confirm_payment_details') }}</xf:title>

<xf:form action="{{ link('purchase/process', null, {'request_key': $purchaseRequest.request_key}) }}" class="block block--paymentInitiate"
	data-no-auto-focus="on"
	data-xf-init="stripe-payment-form"
	data-publishable-key="{$publishableKey}"
	data-recurring="{{ $purchase.recurring ? 'true' : 'false' }}"
	data-pi-secret="{$paymentIntent.client_secret}"
	data-pr-enabled="{$paymentProfile.options.payment_request_api_enable}"
	data-pr-country="{$paymentProfile.options.stripe_country}"
	data-pr-cost="{$cost}"
	data-pr-currency="{$purchase.currency}"
	data-pr-label="{$purchase.title}">
	<div class="block-container">
		<div class="block-body">
			<xf:inforow id="card-errors-container" rowclass="u-hidden">
				<div class="block-rowMessage block-rowMessage--error block-rowMessage--iconic u-hidden" id="card-errors"></div>
			</xf:inforow>

			<xf:if is="$paymentProfile.options.payment_request_api_enable">
				<xf:formrow label="{{ phrase('pay_faster') }}"
					controlid="payment-request-button" rowtype="input" rowclass="js-pr-remove" style="display: none;">
					<div id="payment-request-button"></div>
					<div class="formRow-explain">{{ phrase('stripe_pay_faster_explain') }} {{ phrase('payments_processed_securely_by_x', {'link': 'https://stripe.com/', 'provider': 'Stripe'}) }}</div>
				</xf:formrow>

				<h3 class="block-formSectionHeader js-pr-remove" style="display: none;">{{ phrase('or_enter_payment_details_manually...') }}</h3>
			</xf:if>

			<xf:formrow controlid="card-element" rowtype="input"
				label="{{ phrase('pay_by_card') }}">
				<div id="card-element" class="input"></div>
				<div class="formRow-explain">{{ phrase('payments_processed_securely_by_x', {'link': 'https://stripe.com/', 'provider': 'Stripe'}) }}</div>
			</xf:formrow>

			<xf:comment><xf:formrow controlid="card-number-element" rowtype="input"
				label="{{ phrase('pay_by_card') }}">
				<div class="inputGroup">
					<xf:fa icon="fa--inputOverlay fa-credit-card" id="brand-icon" />
					<div id="card-number-element" class="input"></div>
					<div class="inputGroup-splitter"></div>
					<div id="card-expiry-element" class="input" style="width: 130px"></div>
					<div class="inputGroup-splitter"></div>
					<div id="card-cvc-element" class="input" style="width: 75px"></div>
				</div>
				<div class="formRow-explain">{{ phrase('payments_processed_securely_by_x', {'link': 'https://stripe.com/', 'provider': 'Stripe'}) }}</div>
			</xf:formrow></xf:comment>

			<xf:submitrow icon="payment" submit="{{ phrase('pay_x', {'cost': $purchase.cost|currency($purchase.currency)}) }}" />

			<script type="application/json" class="js-formStyles">
				{
					"base": {
						"color": "{{ parse_less_color(property('textColor', '#141414'))|escape('json') }}",
						"fontFamily": "{{ property('fontFamilyUi')|escape('json') }}",
						"fontSize": "16px",
						"lineHeight": "{{ property('lineHeightDefault')|escape('json') }}"
					},
					"invalid": {
						"color": "#c84448"
					}
				}
			</script>

			<xf:hiddenval name="payment_method_id"></xf:hiddenval>
		</div>
	</div>
</xf:form>