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

{% block title %}Contact - Yltec{% endblock %}

{% block body %}
    <main>
        <section class="contact">
            <div class="container">
                <h1>CONTACTEZ-NOUS</h1>
                <div class="row">
                    <div class="col-7">
                        <div class="form">
                            {{ form_start(form) }}
                            <div class="form__row">
                                {{ form_widget(form.name) }}      
                                {{ form_widget(form.forname) }}      
                            </div>     
                            <div class="form__row">
                                {{ form_widget(form.email) }}      
                                {{ form_widget(form.phone) }}      
                            </div>     
                            {{ form_widget(form.business) }}      
                            {{ form_widget(form.message) }}    

                            <div class="form__confidentialite">
                                <div class="form__confidentialite__widget">
                                    {{ form_widget(form.confidentialite)}}
                                    <span class="checkmark"></span>
                                    <span class="check"></span>
                                </div>
                                <div class="form__confidentialite__label">
                                    {{ form_label(form.confidentialite)}}
                                </div>
                            </div>
                            {% if form.vars.errors is not empty %}
                            <div class="alert alert-danger" role="alert">
                                <p class="title">Erreur</p>
                                <p class="message">{{ form_errors(form) }}</p>
                            </div>
                            {% endif %}
                            {{ form_widget(form) }}
                            <button type="submit" class="btn">Envoyer</button>
                            {{ form_end(form) }}
                        </div>
                    </div>
                    <div class="col-5">
                        <div class="background">
                            <iframe
                                src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d10684.512489221874!2d3.3829291!3d47.9725817!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47efab9621a1d145%3A0xa0a821284e936232!2sYLTEC!5e0!3m2!1sfr!2sfr!4v1676646117833!5m2!1sfr!2sfr"
                                width="100%" height="220" style="border:0;" allowfullscreen="" loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade">
                            </iframe>
                            <ul>
                                <li>
                                    <a href="mailto:contact@yltec.net">
                                        contact@yltec.net
                                    </a>
                                </li>
                                <li>
                                    <a href="tel:+33386914374">
                                        03 86 91 43 74
                                    </a>
                                </li>
                                <li>
                                    <a href="https://goo.gl/maps/VqZ84y5zpfR5ty1n9">
                                        30 A route de chamvres,<br>
                                        89300 Joigny
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}