{% extends 'foundation/front/front.html.twig' %}
{% block body_class %}Contact{% endblock %}
  {% block metaTitle %}
      {% if sectionContact %}
          {% set localeCode = sectionContact.i18ns[0].locale|split('_')|first %}
          {% set i18n = ( app.request.locale == localeCode and localeCode is defined) ? sectionContact.i18ns[0] : (sectionContact.i18ns[1] is defined ? sectionContact.i18ns[1] : null) %}
          {% if i18n %}
              <title> MK WBC |{{ i18n.name }}</title>
          {% endif %}
      {% endif %}
  {% endblock %}
{% block front %}
    <main class="m_site-main m_site-main-contact m_position-relative">
        <div class="m_breadcumbs">
            <div class="m_container-lg">
                <ul class="m_nav-breadcrumb">
                    <li>
                        <a href="{{ path('app_home') }}"><i class="fa fa-home"></i></a>
                    </li>
                    <li>
                        <span>Contact</span>
                    </li>
                </ul>
            </div>
        </div>

        <section class="m_section-banner m_section-page m_section-page-contact">
            <div class="m_section-banner-container m_position-relative">
                <div class="m_banner-bg"
                     style="background-image: url('{{ path('proxy_avatar', {'path': sectionContact.thumbnail.filename}) }}');"></div>
            </div>
        </section>

        <section class="m_section-page">
            <div class="m_container-md">
                <div class="m_section-page-content">
                    <div class="m_section-page-text">
                        <div class="m_section-page-title m_text-center">
                            {% if sectionContact %}
                                {% set localeCode = sectionContact.i18ns[0].locale|split('_')|first %}
                                {% set i18n = (app.request.locale  == localeCode and sectionContact.i18ns[0] is defined)
                                    ? sectionContact.i18ns[0]
                                    : (sectionContact.i18ns[1] is defined ? sectionContact.i18ns[1] : null) %}
                                {% if i18n %}
                                    <h1 class="m_underline-title">{{ i18n.name }}</h1>
                                {% endif %}
                            {% endif %}
                        </div>

                        <div class="m_box-adress">
                            <div class="m_flex">
                                {% if contact %}
                                    <div class="m_box-phone">
                                        <p>
                                            <i class="fa fa-phone"></i>
                                            <a href="#" title="Appelez-nous">{{ contact.phone|format_cm_phone }}</a> /
                                            <a href="#"
                                               title="Appelez-nous">{{ contact.secondPhone|format_cm_phone }}</a>
                                        </p>
                                    </div>
                                {% endif %}
                                <div class="m_box-location">
                                    {% if contact %}
                                        {% set localeCode = contact.country.i18ns[0].locale|split('_')|first %}
                                        {% set i18n = (app.request.locale == localeCode and contact.country.i18ns[0] is defined)
                                            ? contact.country.i18ns[0]
                                            : (contact.country.i18ns[1] is defined ? contact.country.i18ns[1] : null) %}
                                        {% if i18n %}
                                            <p><i class="fa-solid fa-location-dot"></i> {{ contact.address }},
                                                {{ contact.city }} {{ i18n.name }}</p>
                                        {% endif %}
                                    {% endif %}
                                </div>
                            </div>
                            {% if join %}
                            <a href="{{ join.link }}" class="m_link-blue m_link-other-link"
                               target="_blank" rel="noopener noreferrer">
                                {{ 'join_mkonnected'|trans }}
                            </a>
                            {% endif %}
                        </div>

                        <div class="m_form-box">
                            {% for message in app.flashes('success') %}
                            <div class="alert alert-success">{{ message }}</div>
                            {% endfor %}i18n
                            {{ form_start(form) }}
                            <div class="m_field m_field-select" style="display: none">
                                <div class="m_fields m_fields-radio m_flex">
                                    {{ form_label(form.civility, null, {'label_attr': {'class': 'form-label'}}) }}
                                    {{ form_widget(form.civility) }}
                                    {{ form_errors(form.civility) }}
                                </div>
                            </div>
                            <div class="m_field">
                                <label>{{ form_label(form.civility) }}</label>
                                <div class="m_fields m_fields-radio m_flex">
                                    {% for choice in form.civility.vars.choices %}
                                        <div class="m_field-radio">
                                            <input type="radio"
                                                   id="gender_{{ choice.value }}"
                                                   name="{{ form.civility.vars.full_name }}"
                                                   value="{{ choice.value }}"
                                                   {% if form.civility.vars.value == choice.value %}checked{% endif %}>
                                            <label for="gender_{{ choice.value }}">{{ choice.label|trans }}</label>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>

                            <div class="m_flex m_fields">
                                <div class="m_field">
                                    {{ form_label(form.firstname) }}
                                    {{ form_widget(form.firstname) }}
                                    {{ form_errors(form.firstname) }}
                                </div>
                                <div class="m_field">
                                    {{ form_label(form.lastname) }}
                                    {{ form_widget(form.lastname) }}
                                    {{ form_errors(form.lastname) }}
                                </div>
                            </div>
                            <div class="m_flex m_fields m_field-container">
                                <div class="m_field m_field-select">
                                    {{ form_label(form.sectorId) }}
                                    {{ form_widget(form.sectorId, {'attr': {'class': 'select-input'}}) }}
                                    {{ form_errors(form.sectorId) }}
                                </div>
                                <div class="m_field">
                                    {{ form_label(form.phone) }}
                                    {{ form_widget(form.phone) }}
                                    {{ form_errors(form.phone) }}
                                </div>
                            </div>


                            <div class="m_field">
                                {{ form_label(form.email) }}
                                {{ form_widget(form.email) }}
                                {{ form_errors(form.email) }}
                            </div>

                            <div class="m_field">
                                {{ form_label(form.message) }}
                                {{ form_widget(form.message) }}
                                {{ form_errors(form.message) }}
                            </div>

                            <div class="m_field">
                                {{ form_widget(form.send, { 'attr': {'class': 'm_field-submit', 'value': 'Envoyer'|trans} }) }}
                            </div>

                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
{% endblock %}