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

{% block content %}
<div class='container' style='max-width: 800px;'>
	{% include '@kohinos/block/breadcrumb.html.twig' with {'label': 'Encaissement'} %}

	{% if validation == true %}
		<h2 class='text-center w-100 mt-4 mb-4'>{{ "Code de validation de l'habitant·e"|trans }}</h2>
		<div id="payment-validation-subheader"></div>
	{% else %}
		<h2 class='text-center w-100 mt-4 mb-4'>{{ "Encaissement"|trans }}</h2>
	{% endif %}

    <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) }}
			{% endif %}
		{{ form_end(form) }}
	</div>
</div>
{% endblock %}
