{% extends '@SyliusShop/layout.html.twig' %}

{% form_theme form '@DediSyliusContactPlugin/Shop/Ui/Form/attachmentsTheme.html.twig' %}

{% import '@SyliusUi/Macro/headers.html.twig' as headers %}

{% block flash %}
{% endblock %}

{% block content %}
    <section class="container contact-container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    <a href="{{ path('sylius_shop_homepage') }}">{{ 'sylius.ui.home'|trans }}</a>
                </li>
                <li class="breadcrumb-item active">{{ 'app.ui.contact.contact_us'|trans }}</li>
            </ol>
        </nav>

        {% include '@SyliusShop/_flashes.html.twig' with { 'class' : 'margin-bottom-2' } %}

        <div class="row justify-content-md-center">
            <div class="col-lg-8">
                <header>
                    {{ headers.shop('sylius.ui.contact_us'|trans,'paper-plane', 'sylius.ui.use_the_contact_form_below_to_send_us_a_message'|trans) }}
                </header>

                <div class="contact-wrapper">
                    {{ sylius_template_event('sylius.shop.contact.request.after_content_header') }}

                    <div class="contact-form">
                        {{ form_start(form, {'action': path('sylius_shop_contact_request'), 'attr': {'class': 'ui large form recaptcha-form'}}) }}

                        {% if form.subject is defined %}
                            {{ form_row(form.subject) }}
                        {% endif %}

                        {{ form_row(form.name) }}
                        {{ form_row(form.email, sylius_test_form_attribute('contact-email')) }}
                        {{ form_row(form.phone) }}
                        {{ form_row(form.message, sylius_test_form_attribute('contact-message')) }}

                        {{ form_row(form.attachments, {
                            'help' : 'app.ui.form.file_authorized_format'|trans,
                            'help_html':true
                        }) }}

                        {{ form_widget(form.captcha) }}
                        {{ form_errors(form.captcha) }}

                        {{ sylius_template_event('sylius.shop.contact.request.form', {'form': form}) }}

                        {{ form_row(form._token) }}
                        <div class="form-btn-wrapper">
                            <button type="submit" id="recaptcha-submit"
                                    class="btn btn-primary" {{ sylius_test_html_attribute('send-button') }}>{{ 'sylius.ui.send'|trans }}
                            </button>
                        </div>
                        {{ form_end(form, {'render_rest': false}) }}
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

    {{ encore_entry_script_tags('collection_form', null, 'dedi') }}

    <script type="application/javascript">
        window.collectionForm({
            collectionSelector: '#contact_form_message_attachments',
            maxItems: 5,
        });
    </script>
{% endblock %}
