{% extends "base/base-front-general.html.twig" %}
{% block title %}{% trans into locale %}Contact{% endtrans %} | Cershop{% endblock %}
{% block metadescription %}{% endblock %}
{% block stylesheet %}
    {{ parent() }}
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock %}

{% block bodyclass %}{{ parent() }}{% endblock %}
{% block contenido %}
<div class="page-content">
    <div class="page-header" style="background-image: url({{ asset('assets/front/images/contacto/bg-contacto.jpg') }})">
        <h1 class="page-title font-weight-bold text-capitalize ls-l">{% trans into locale %}Contact with us{% endtrans %}</h1>
    </div>
    <!-- Migas de pan -->
    <nav class="breadcrumb-nav">
        <div class="container pb-0">
            <ul class="breadcrumb">
                <li><a href="{{ path('home.'~locale) }}"><i class="d-icon-home"></i></a></li>
                <li class="active">{% trans into locale %}Contact{% endtrans %}</li>
            </ul>
        </div>
    </nav>
    <!-- ./migas de pan -->
    <div class="page-content mt-10 pt-7">
        <section class="contact-section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 ls-m mb-4">
                        <div class="grey-section d-flex align-items-center h-100">
                            <div class="pl-5 pt-3 pr-5">
                                <h4 class="mb-2 text-capitalize">{% trans into locale %}Address{% endtrans %}</h4>
                                <p>Pol. Ind. SUPOI-8. C/ Cedrillas, nº20<br>12550 Almassora (Castellón) - Spain</p>

                                <h4 class="mb-2 text-capitalize">{% trans into locale %}Telephone{% endtrans %}</h4>
                                <p>
                                    <a href="tel:+34964342424">+ 34 964 34 24 24</a><br>
                                </p>

                                <h4 class="mb-2 text-capitalize">{% trans into locale %}Email{% endtrans %}</h4>
                                <p class="mb-4">
                                    <a href="mailto:itc@itc.uji.es">itc@itc.uji.es</a><br>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-9 col-md-8 col-sm-6 d-flex align-items-center mb-4">
                        <div class="w-100">
                            {% if form_errors(form) %}
                                <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ form_errors(form) }}</div>
                            {% endif %}
                            {% for flash_message in app.session.flashbag.get('success') %}
                                <div class="alert alert-success alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                            {% endfor %}
                            {% for flash_message in app.session.flashbag.get('danger') %}
                                <div class="alert alert-danger alert-dark alert-inline mt-2 mb-3" role="alert">{{ flash_message }}</div>
                            {% endfor %}
                            {{ form_start(form, {'action':path('contacto.'~locale), 'method':'POST', 'class':'pl-lg-2'}) }}
                                <h4 class="ls-m font-weight-bold">{% trans into locale %}Leave us a message{% endtrans %}</h4>
                                <p>{% trans into locale %}Fill in the form and we will answer you as soon as possible.{% endtrans %}</p>
                                <div class="row mb-2">
                                    <div class="col-md-6 mb-4">
                                        {{form_widget(form.nombre)}}
                                    </div>
                                    <div class="col-md-6 mb-4">
                                        {{form_widget(form.email)}}
                                    </div>
                                    <div class="col-12 mb-4">
                                        {{form_widget(form.asunto)}}
                                    </div>
                                    <div class="col-12 mb-4">
                                        {{form_widget(form.mensaje)}}
                                    </div>
                                    <div class="form-footer mb-2">
                                        <div class="g-recaptcha" data-sitekey="{{ data_site_key_gcaptcha }}"></div>
                                        <div class="form-checkbox">
                                            <input type="checkbox" id="condiciones" name="condiciones" class="custom-checkbox">
                                            <label class="form-control-label" for="condiciones">{% trans into locale %}conditions{% endtrans %}</label>
                                        </div>
                                        <div class="form-checkbox">
                                            <input type="checkbox" id="comunicaciones" name="newsletter" class="custom-checkbox">
                                            <label class="form-control-label" for="comunicaciones">{% trans into locale %}I agree to receive commercial communications.{% endtrans %}</label>                        
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-light">{% trans into locale %}Send{% endtrans %}<i class="d-icon-arrow-right"></i></button>
                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <iframe class="mt-5" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d24461.33931817756!2d-0.1781523266843228!3d39.97118801539141!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd6001ae6788222d%3A0x4661f759f5b44dfe!2sITC%20-%20Instituto%20de%20Tecnolog%C3%ADa%20Cer%C3%A1mica%20(sede%20Almassora)!5e0!3m2!1ses!2ses!4v1653901924676!5m2!1ses!2ses" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
    </div>
</div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
{% endblock %}