{{ form:set is="benevole" }}
                {{ if {form:errors} }}
                    <p>Oups, certaines données sont manquantes. Vérifie bien le formulaire ou contacte nous par email.</p>

                {{ /if }}
                {{ if {form:success} }}
                    <div class="text-confirmation">
                        <i class="fa-light fa-envelope-circle-check" style="font-size: 60px; padding-bottom: 20px;"></i>
                        {{ confirmation }}
                    </div>
                {{ /if }}
                {{ form:create }}
                    <h4 class="uppercase mt48 mt-xs-0">Devenir bénévole</h4>
                    <p class="lead mb64 mb-xs-24">
                        Vous souhaitez vous impliquer et contribuer à la réussite de notre Pride ? Devenez bénévole et participez à cette expérience enrichissante ! Remplissez simplement le formulaire ci-dessous pour rejoindre notre équipe.
                    </p>




                    {{ if success }}
                        <div class="bg-green-300 text-white p-2">
                            {{ success }}
                        </div>
                    {{ else }}
                        <div>
                            <hr>
                            <h6 class="uppercase">
                                1. Comment te nommes-tu?
                            </h6>
                            {{ fields }}
                            {{ if type == "text" }}
                                {{ if handle == "email"}}
                                    </div><div>
                                    <hr>
                                    <h6 class="uppercase">
                                        3. Comment te contacter
                                    </h6>
                                    <input type="email" class="col-md-6 validate-required validate-email{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" required />
                                {{ elseif handle == "street" }}
                                </div><div>
                                    <hr>
                                    <h6 class="uppercase">
                                        4. Quel est ton adresse
                                    </h6>
                                    <input type="text" class="col-md-12 validate-required{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" required/>
                                {{ elseif handle == "city" }}
                                    <input type="text" class="col-md-12 validate-required {{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" required/>
                                {{ elseif handle == "birthdate" }}
                                </div><div>
                                    <hr>
                                    <h6 class="uppercase">
                                        5. Quelle est ta date de naissance
                                    </h6>
                                    <input type="date" class="col-md-6 col-md-offset-3 {{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" required/>
                                {{ else }}
                                    <input type="text" class="col-md-6 validate-required{{ if error }} field-error{{ /if }}" name="{{handle}}" placeholder="{{ display }}" value="{{ old }}" required />
                                {{ /if }}
                            {{ elseif type == "radio" }}
                                </div><div>
                                <hr>
                                <h6 class="uppercase">
                                    2. Comment doit-on te genrer?
                                </h6>
                                    <div class="col-sm-4 col-xs-4">
                                        <p>Il</p>
                                        <div class="radio-option{{ if error }} radio-error{{ /if }}">
                                            <div class="inner"></div>
                                            <input type="radio" name="gender" value="il" required />
                                        </div>
                                    </div>
                              <div class="col-sm-4 col-xs-4">
                                        <p>Elle</p>
                                        <div class="radio-option{{ if error }} radio-error{{ /if }}">
                                            <div class="inner"></div>
                                            <input type="radio" name="gender" value="elle" />
                                        </div>
                                    </div>
                              <div class="col-sm-4 col-xs-4">
                                        <p>Iel</p>
                                        <div class="radio-option{{ if error }} radio-error{{ /if }}">
                                            <div class="inner"></div>
                                            <input type="radio" name="gender" value="iel" />
                                        </div>
                                    </div>
                            {{ elseif type == "textarea" }}
                            </div><div>
                                <hr>
                                <h6 class="uppercase">
                                    6. Des remarques? Des envies?
                                </h6>
                                <textarea class="{{ if error }} field-error{{ /if }}" name="{{ handle }}" rows="4" placeholder="{{ display }}">{{ old }}</textarea>
                            {{ /if }}

                            {{ /fields }}
                        </div>
                        <input type="text" class="hidden" name="{{ honeypot ?? 'honeypot' }}">

                        <button type="submit">S'inscrire</button>
                    {{ /if }}
                {{ /form:create }}
            {{ /form:set }}