{% extends 'base.html.twig' %}

{% block title %}Faire un don
{% endblock %}

{% block body %}
	<div class="form-card-bg form-dotation">
		<div class="container">
			<div class="form-card donation-card">
				<div class="base-content">
					<h1>Fond de dotation <span>Delta7</span></h1>

                    <div class="block-helper is-blue">
                        <p>Merci de remplir ce formulaire en ligne pour recevoir l'IBAN ou l'imprimer directement.</p>
                        <p>Pour être accompagné par l’équipe Delta 7, appelez le <a href="tel:+33146074222">01.46.07.42.22</a> ou le <a href="tel:+33698618999">06.98.61.89.99</a>.</p>
                    </div>

					{% for error in form.vars.errors.form.getErrors(true) %}
						<div class="alert alert-error">
							{{ error.message }}
						</div>
					{% endfor %}
					{% for message in app.flashes('success') %}
						<div class="alert alert-success">
							{{ message }}
						</div>
					{% endfor %}
					{% for message in app.flashes('error') %}
						<div class="alert alert-error">
							{{ message }}
						</div>
					{% endfor %}

					{{ form_start(form, {'attr': {'class': 'form-apply'}}) }}
                        <h2>Informations personnelles</h2>
                        <div class="flex">
						{{ form_row(form.firstname) }}
						{{ form_row(form.lastname) }}
                        </div>
                        <div class="flex">
						{{ form_row(form.email) }}
						{{ form_row(form.phone) }}
                        </div>
					    {{ form_row(form.captcha) }}
                        
                    <button class="btn is-secondary is-xl is-anim-s" style="margin-right:auto;" type="submit">
					<span>Télécharger l'IBAN</span>
					{{ svg('images/base/arrow_white.svg') }}</button>
					{{ form_end(form) }}
				</div>
			</div>
		</div>
	</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
    document.querySelectorAll(".collapsible-card").forEach(card => {
            card.addEventListener("click", () => {
                card.classList.toggle("active");
            });
    });
})
</script>
{% endblock %}