{% extends '@kohinos/common/layout.html.twig' %}

{% block header %}
	<div class="header-placeholder"></div>
{% endblock header %}

{% block content %}
<div class='container' style='max-width: 800px;'>
	{% if validation != true %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('index') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ app.session.get('_prestagere') }}</b>
		</div>

		<h2 class='text-center w-100 mt-4 mb-4'>{{ "Paiement en Monnaie Solidaire"|trans }}</h2>
	{% else %}
		<div class="mt-3 payment-page-header">
			<a href='{{ path('encaissement') }}'>
				<i class="fas fa-chevron-circle-left"></i> {{ 'Retour'|trans }}
			</a>
			<b>{{ app.session.get('_prestagere') }}</b>
		</div>

		<h2 class='text-center w-100 mt-4 mb-4 payment-recap'></h2>
		<div id="payment-validation-subheader">{{ "Veuillez entrer votre code de validation"|trans }}</div>
	{% endif %}
	<br/>

    <div class='text-center mb-5'>
		{{ form_start(form, {'attr': {'autocomplete': 'off'}}) }}
			{% if validation == true %}
				<div id="code-visual"></div>
				<div id="code-digits-container">
					<button type="button" class="payment-code-button" data-value="1">1</button>
					<button type="button" class="payment-code-button" data-value="2">2</button>
					<button type="button" class="payment-code-button" data-value="3">3</button>
					<button type="button" class="payment-code-button" data-value="4">4</button>
					<button type="button" class="payment-code-button" data-value="5">5</button>
					<button type="button" class="payment-code-button" data-value="6">6</button>
					<button type="button" class="payment-code-button" data-value="7">7</button>
					<button type="button" class="payment-code-button" data-value="8">8</button>
					<button type="button" class="payment-code-button" data-value="9">9</button>
					<button type="button" class="payment-code-correction-button">
						<i class="fa fa-backspace"></i>
					</button>
					<button type="button" class="payment-code-button" data-value="0">0</button>
					<div class="payment-code-button-placeholder"></div>
				</div>

				<div style="display:none;">
					{{ form_row(form.adherent) }}
					{{ form_row(form.montant) }}
				</div>
			{% else %}
				{{ form_row(form.adherent) }}
				{{ form_row(form.montant) }}
				<br/>
			{% endif %}
			<br/>

		{{ form_end(form) }}
	</div>
</div>
{% endblock %}

{% block footer %}{% endblock footer %}