{% extends "partial/layout.html.twig" %}

{% block title %}{{ t("contact_page_name", "Contact Us") }}{% endblock %}
{% block description %}{{ t("contact_meta_description", "Contact us") }}{% endblock %}
{% block keywords %}{{ t("contact_meta_keywords", "contact, us, questions, queries, file, hosting") }}{% endblock %}

{% block body %}
    <section>
        <div class="container form-full-width">
            <div class="row">
                <div class="col-md-12">
                    <h1>{{ t("contact_page_name", "Contact Us") }}</h1>
                    <hr>
                </div>
            </div>
            <div class="row justify-content-between">
                <div class="col-md-9">
                    {% if msg_page_errors is defined %}
                    <div class="alert bg--error">
                        <div class="alert__body"><i class="fa fa-exclamation-triangle color--error"></i>&nbsp;&nbsp;{% if msg_page_errors is defined %}{{ msg_page_errors|join('. ') }}{% endif %}</div>
                    </div>
                    {% elseif msg_page_successes is defined %}
                    <div class="alert bg--success">
                        <div class="alert__body"><i class="fa fa-check color--success"></i>&nbsp;&nbsp;{% if msg_page_successes is defined %}{{ msg_page_successes|join('. ') }}{% endif %}</div>
                    </div>
                    {% endif %}
                    
                    <p>{{ t('contact_intro', 'Please use the following form to contact us with any queries. Abuse reports should be sent via our <a href="[[[ABUSE_URL]]]">abuse pages</a>.', {'ABUSE_URL': WEB_ROOT ~ '/report_file'})|raw }}</p>
                    
                    <form method="post" role="form" action="{{ CORE_SITE_PATH }}/contact" autocomplete="off">
                        <!-- fix for chrome auto complete not working -->
                        <input style="display:none"><input type="password" style="display:none">
                        <div class="row">
                            <div class="col-md-6">
                                <span>{{ t('contact_full_name', 'Your full name') }}:</span>
                                <input name="fullName" id="fullName" value="{{ fullName }}" type="text" autocomplete="off" required="required"/>
                            </div>
                            <div class="col-md-6">
                                <span>{{ t('contact_email_address', 'Email address') }}:</span>
                                <input name="emailAddress" id="emailAddress" value="{{ emailAddress }}" type="email" autocomplete="off" required="required"/>
                            </div>
                            
                            <div class="col-md-12">
                                <span>{{ t('contact_select_subject', 'Select subject') }}:</span>
                                <select id="queryType" name="queryType" onChange="selectTypeItem(); return false;">
                                    {% for k,queryTypeOption in queryTypes %}
                                        <option value="{{ k }}" {{ (queryType == k) ? 'SELECTED' : '' }}>{{ queryTypeOption }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-md-12">
                                <span>{{ t('contact_your_query', 'Your query') }}:</span>
                                <textarea name="query" id="query" rows="5" autocomplete="off" required="required">{{ query }}</textarea>
                            </div>
                            
                            {% if SITE_CONFIG_CONTACT_FORM_SHOW_CAPTCHA == 'yes' %}
                            <div class="col-md-12">
                                <div class="input-group" style="display: block; overflow: hidden;">
                                    {{ CoreHelper.outputCaptcha()|raw }}
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="col-md-5 col-lg-4"><br/>
                                <button class="btn btn--primary type--uppercase" type="submit">{{ t("contact_submit_form", "submit form")|title }}</button>
                            </div>
                        </div>
                        <input type="hidden" value="1" name="submitme"/>
                    </form>
                </div>
                <div class="col-md-3 text-center">
                    <img alt="Image" src="{{ theme.getFrontendImagePath() }}/contact-banner.png"/>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block footerjs %}
<script>
function selectTypeItem()
{
    if ($('#queryType').val() == 'contact_query_type_abuse_report')
    {
        if (confirm({{ t('contact_abuse_report_popup_notice', 'Please submit all abuse reports via our dedicated abuse report page. Click OK to continue to it now.')|json_encode()|raw }}))
        {
            $('#queryType').val('contact_query_type_site_support');
            window.location = '{{ WEB_ROOT }}/report_file';
        }
        else
        {
            $('#queryType').val('contact_query_type_site_support');
        }
    }
}
</script>
{% endblock %}