{namespace s=Famelo\Saas\ViewHelpers}

<f:form action="makePayment">
<f:flashMessages />
<h4>{f:translate(value: '1. Choose Amount')}</h4>

<section class="payment">
	<fieldset class="row">
		<div class=" col-sm-4">
			<div class="radio">
			<label>
				<div class="header">
					<p class="title">10 €</p>
				</div>
				<div class="body">
					<p class="credits">
						<s:format.points amount="10" currency="EUR"/> <br />
						Credits
					</p>
					<div class="order">
						10 Euro<f:form.radio name="amount" value="10" />
					</div>
				</div>
			</label>
			</div>
		</div>
		<div class=" col-sm-4">
			<div class="radio">
			<label>
				<div class="header">
					<p class="title">20 €</p>
				</div>
				<div class="body">
					<p class="credits">
						<s:format.points amount="20" currency="EUR"/> <br />
						Credits
					</p>
					<div class="order">
						20 Euro <f:form.radio name="amount" value="20" />

					</div>
				</div>
			</label>
			</div>
		</div>
		<div class=" col-sm-4">
			<div class="radio">
			<label>
				<div class="header">
					<p class="title">30 €</p>
				</div>
				<div class="body">
					<p class="credits">
						<s:format.points amount="30" currency="EUR"/> <br />
						Credits
					</p>
					<div class="order">
						30 Euro <f:form.radio name="amount" value="30" />
					</div>
				</div>
			</label>
			</div>
		</div>
	</fieldset>
</section>
<h4>{f:translate(value: '2. Choose Payment method')}</h4>
<section class="payment payment-second ">
	<fieldset>
		<f:for each="{paymentGateways}" as="paymentGateway" key="paymentGatewayName">
				<label>
					<f:form.radio name="paymentGateway" value="{paymentGatewayName}" />
			    	{f:translate(value: paymentGateway.name)}
			  	</label>
		</f:for>
	</fieldset>
</section>

	<button type="submit" class="btn btn-success pull-right">{f:translate(value: 'Buy now')}</button>

</f:form>