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

{% block title %}Lô-Ba Contact{% endblock %}

{% block main %}

    <section class="contact-section">
        <div class="cont-full">
            <div class="contact-container">
                <div class="form-container">
                    <h3>{{ 'contact.title'|trans }}</h3>
                    {{ form_start(form, {
                        'attr': {'class': 'contact-form'}
                    }) }}
                    {{ form_widget(form.author, {
                        'attr': {'placeholder': 'contact.placeholder.author'|trans}
                    }) }}
                    {{ form_widget(form.email, {
                        'attr': {'placeholder': 'contact.placeholder.email'|trans}
                    }) }}
                    {{ form_widget(form.subject, {
                        'attr': {'placeholder': 'contact.placeholder.topic'|trans}
                    }) }}
                    {{ form_widget(form.content, {
                        'attr': {'placeholder': 'contact.placeholder.message'|trans}
                    }) }}
                    <input type="submit" value="{{ 'contact.contact-btn'|trans }}" class="send-button">
                    {{ form_end(form) }}
                </div>

                <div class="map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.4522234623596!2d-73.97322210558407!3d40.7520773868599!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2591d72702681%3A0xf00aba15c95483c1!2sNon%20profit%20%7C%20L%C3%B4-Ba%20International%20%7C%20United%20States%20%7C%20ONG!5e0!3m2!1sfr!2sfr!4v1678910892175!5m2!1sfr!2sfr"
                            allowfullscreen="" loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade">
                    </iframe>
                </div>
            </div>
        </div>
    </section>

{% endblock %}