{% if app.request.locale == "hr" %}
        <div class="above-contact-form">
            <p><span class="text-bold"><strong>KONTAKTIRAJTE NAS VEĆ DANAS!</strong></span> Odaberite proizvode i usluge koje vas zanimaju, a naš će vas tim kontaktirati što je prije moguće.</p>
        </div>
    {% elseif app.request.locale == "de" %}
        <div class="above-contact-form">
            <p><strong>Zögern Sie nicht, uns noch heute zu kontaktieren!</strong> Wählen Sie die Serviceart, wählen Sie das Produkt Ihres Interesses, geben Sie Ihren Standort und Ihre Uhrzeit an und unser Team wird sich so schnell wie möglich mit Ihnen in Verbindung setzen.</p>
        </div>
    {% else %}
        <div class="above-contact-form">
            <p><span class="text-bold"><strong>DON’T HESITATE TO CONTACT US TODAY!</strong></span> Provide your location, choose the service type, select the products of your interest, and our team will contact you as soon as possible.</p>
        </div>
    {% endif %}
    <div class="product-contact-form-wrapper">
        <p class="contact-details">{{ 'translate.contact_us'|trans }}</p>
        {% if not form.vars.valid %}
            <div class="alert alert-danger alert-dismissible">
                <h5 style="color: white"><i class="icon fa fa-ban"></i> Greška!</h5>
                <ul class="list-unstyled">
                    {# Loop through every form item #}
                    {% for child in form.children %}
                        {# Display the errors of the form item #}
                        {%for error in child.vars.errors%}
                            <li>{{error.message}}</li>
                        {%endfor%}
                    {%endfor%}
                </ul>
            </div>
        {% endif %}
        {{ form_start(form) }}
        <div class="row">
            <div class="col-6">
                {{ form_widget(form.first, {"attr": {"class": "polje", "placeholder": 'translate.first_name'|trans }}) }}
            </div>
            <div class="col-6">
                {{ form_widget(form.last, {"attr": {"class": "polje", "placeholder": 'translate.last_name'|trans }}) }}
            </div>
            <div class="col-6">
                {{ form_widget(form.email, {"attr": {"class": "polje", "placeholder": 'translate.email'|trans }}) }}
            </div>
            <div class="col-6">
                {{ form_widget(form.phone, {"attr": {"class": "polje", "placeholder": 'translate.phone'|trans }}) }}
            </div>
            <div class="col-6">
                {{ form_widget(form.company, {"attr": {"class": "polje", "placeholder": 'translate.companyName'|trans }}) }}
            </div>
            <div class="col-6">
                {{ form_widget(form.city, {"attr": {"class": "polje", "placeholder": 'translate.city'|trans }}) }}
            </div>
            <div class="col-12">
                {{ form_widget(form.country, {"attr": {"class": "polje", "placeholder": 'translate.country'|trans }}) }}
            </div>
            <div class="col-12" id="box">
                <div class="col-12 mt-3">
                    <p class="font-weight-bold"><strong>{{ 'translate.choose_service_contact_form'|trans }}</strong></p>
                </div>
                <div class="col-12 mt-3">
                    <div class="row">
                        <div class="col-auto">
                            <div class="form-check">
                                {{form_widget(form.buyservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                <input class="form-check-input oznaci" type="checkbox" id="checkbox1">
                                <label class="form-check-label" for="contact_buyservice">{{ 'translate.buy_screenz_product'|trans }}</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check">
                                {{form_widget(form.rentservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                <label class="form-check-label" for="contact_rentservice">{{ 'translate.rent_screenz_product'|trans }}</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check">
                                {{form_widget(form.supportservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                <label class="form-check-label" for="contact_supportservice">{{ 'translate.support_screenz_product'|trans }}</label>
                            </div>
                        </div>
                        <div class="col-auto">
                            <div class="form-check">
                                {{form_widget(form.otherservice, {"attr": {"class": "form-check-input oznaci" }}) }}
                                <label class="form-check-label" for="contact_otherservice">{{ 'translate.other_screenz_product'|trans }}</label>
                            </div>
                        </div>
                    </div>

                </div>

                <div class="col-12 mt-3">
                    <p class="font-weight-bold"><strong>{{ 'translate.choose_product_contact_form'|trans }}</strong></p>
                </div>

                <div class="col-12">

                    {{ form_widget(form.pages, {"attr": {"class": "form-control select2bs4" }}) }}
                </div>

                <div class="col-12 mt-3">
                    <p class="font-weight-bold"><strong>{{ 'translate.message'|trans }}</strong></p>
                    {{ form_widget(form.message, {"attr": {"class": "polje", "placeholder": 'translate.message'|trans }}) }}
                </div>
            </div>
            <div class="col-12 text-left ">
                <div class="form-check mt-3">
                    {{form_widget(form.terms, {"attr": {"class": "form-check-input oznaci" }}) }}
                    <label class="form-check-label d-flex justify-content-between" for="contact_terms">
                        <span style="display: none">Agree</span>
                        <span>{{ 'translate.terms_agree'|trans }}</span>

                    </label>
                </div>
            </div>
            <div class="col-12 text-left ">
                <div class="form-check mt-3">
                    {{form_widget(form.marketing, {"attr": {"class": "form-check-input oznaci" }}) }}
                    <label class="form-check-label d-flex justify-content-between" for="contact_marketing">
                        <span style="display: none">Agree</span>
                        <span>{{ 'translate.marketing_agree'|trans }}</span>

                    </label>
                </div>
            </div>
            <div class="col-12 mt-3">
                {{ form_widget(form.captcha, {"attr": {"class": "mt-3" }}) }}
            </div>
            <div class="col-12">
                <button type="submit" class="">{{ 'translate.submit'|trans }}</button>
            </div>
            <div class="col-12">
                <p class="info">{{ 'translate.all_fields_required'|trans }}</p>
            </div>
            {{ form_end(form) }}

            <script>
                const el = document.getElementById('contact_country');

                const box = document.getElementById('box');

                el.addEventListener('change', function handleChange(event) {
                    if (event.target.value > 0) {
                        box.style.display = 'block';
                    } else {
                        box.style.display = 'none';
                    }
                });
            </script>
        </div>
    </div>