{% extends "web/base.html.twig" %}
{% block body %}
    <div class="wrapper">

        <!-- CONTAINER -->
        <div class="content container">

            <div class="row">
                <div class="col-md-12 padding-bottom-xl padding-top-lg">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                    <h1>Contacte</h1>
                    <p class="lead">Posa't en contacte amb nosaltres i diga'ns què necessites</p>
                    {% else %}
                        <h1>Contacto</h1>
                        <p class="lead">Ponte en contacto con nosotros y dinos que necesitas</p>
                    {% endif %}
                </div>
            </div>
            <div class="row">
                <!-- MAP -->
                <div class="google-map">
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2992.622687736283!2d2.1752804159390027!3d41.40399977926274!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12a4a2dc5ac5e22d%3A0xbb5f20e792fa4a6f!2sJM%20Gravadors!5e0!3m2!1ses!2ses!4v1645910139992!5m2!1ses!2ses"
                            width="100%" height="490" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                </div>
                <!-- /.google-map -->
            </div>

            <div class="row irow">
                <div class="col-sm-4">
                    <h4>{% if app.request.attributes.get('_locale') == 'ca' %}Direcció{% else %}Dirección{% endif %}</h4>
                    <address>Lepant, 264, 4ª A<br/>08013 Barcelona </address>
                </div>
                <div class="col-sm-4">
                    <h4>{% if app.request.attributes.get('_locale') == 'ca' %}Contacte{% else %}Contacto{% endif %}</h4>
                    <dl class="dl-horizontal">
                        <dt>{% if app.request.attributes.get('_locale') == 'ca' %}Telèfon:{% else %}Teléfono{% endif %}</dt>
                        <dd>
                            <p>93 532 11 22 </p>
                        </dd>
                        <dt>Fax:</dt>
                        <dd>
                            <p>93 265 27 97</p>
                        </dd>
                        <dt>Email:</dt>
                        <dd>
                            <p>
                                <a href="mailto:jm@jmgravadors.cat">jm@jmgravadors.cat</a>
                            </p>
                        </dd>
                    </dl>
                </div>
                <div class="col-sm-4">
                    {% if app.request.attributes.get('_locale') == 'ca' %}
                        <h4>Horari</h4>
                        <p> Dilluns a dijous de 8.30 a 15.00h i de 16.00 a 19.00h
                            <br/>
                            Divendres de 8.30 a 15.00h.</p>
                    {% else %}
                        <h4>Horario</h4>
                        <p> Lunes a jueves de 8.30 a 15.00h y de 16.00 a 19.00h
                            <br/>
                            Viernes de 8.30 a 15.00h.</p>
                    {% endif %}
                </div>
            </div>

            <hr/>

            <div class="row irow">
                <!-- Form -->
                <div class="col-md-12">
                    <br/>
                    <h4>{% if app.request.attributes.get('_locale') == 'ca' %}Formulari de contacte{% else %}Formulario de contacto{% endif %}</h4>
                    <form action="{{ path('post-contact') }}" method="post" id="send-form" class="send-form" novalidate="">
                        <fieldset class="form-wrap">
                            <div class="form-group">
                                <input type="text" name="name" id="send-form-name" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Nom{% else %}Nombre{% endif %}" required="required">
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" id="send-form-email" placeholder="Email" required="required">
                            </div>
                            <div class="form-group col-sm-6" style="border-left: 0">
                                <input type="text" name="phone" id="send-form-phone" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Telèfon{% else %}Teléfono{% endif %}" required="required">
                            </div>
                            <div class="form-group col-sm-6">
                                <input type="text" name="company" id="send-form-company" placeholder="Empresa">
                            </div>
                            <div class="form-group">
                                <textarea name="message" placeholder="{% if app.request.attributes.get('_locale') == 'ca' %}Com podem ajudar-te?{% else %}¿Como podemos ayudarte?{% endif %}" id="send-form-message"
                                          required="required"></textarea>
                            </div>
                        </fieldset>
                        <button type="submit" class="btn btn-accent">Enviar</button>
                    </form>
                </div>
            </div>
            </div>

        </div>
        <!-- /.container -->

    </div>
    <!-- /.wrapper -->
{% endblock %}