{%- assign form_id="contact-form" -%}
{%- assign name_input_id="contact-name" -%}
{%- assign email_input_id="contact-email" -%}
{%- assign message_input_id="contact-message" -%}
{%- assign submit_input_id="contact-submit-button" -%}
{%- assign reset_input_id="contact-reset-button" -%}
{%- assign recaptcha_widget_id="recaptcha-checkbox" -%}
{%- assign onsubmit_callback="processContactRequest" -%}
{%- assign onreset_callback="resetContactForm" -%}
{%- assign onfocusout_callback="toggleSubmitInputElement" -%}
<section id="contact" class="inverted" style="{{ include.style | default: nil }}">
    <header class="major">
        <h2>Contact Me</h2>
    </header>
    <div class="row gtr-200">
        <div class="col-6 col-12-medium col-12-small col-12-xsmall">
            {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}
        </div>
        <div class="col-6 col-12-medium col-12-small col-12-xsmall">
            <ul class="contact">
                <li class="icon solid fa-envelope"><a href="mailto:{{ site.email }}">{{ site.email }}</a></li>
                <li class="icon solid fa-phone"><a href="tel:{{ site.phone }}">{{ site.phone }}</a></li>
                <li class="icon solid fa-home">{{ site.street_address }}<br />
                {{ site.zip_code }}, {{ site.city }}</li>
            </ul>
        </div>
    </div>
</section>

{% include contact_client_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}