<form data-contact-form class="form" action="{{urls.contact_us_submit}}" method="post">
    {{inject 'contactEmail' (lang 'forms.validate.contact.email_address')}}
    {{inject 'contactQuestion' (lang 'forms.validate.contact.question')}}
    {{#if forms.contact.error}}
    <div id="contact-us-error">{{> components/common/alert/alert-error forms.contact.error}}</div>
    {{/if}}
    <input type="hidden" name="page_id" id="page_id" value="{{forms.contact.page_id}}">
    <div class="form-row form-row--half">
        {{#if forms.contact.name}}
            <div class="form-field">
                <label class="form-label" for="contact_fullname">{{lang 'forms.contact_us.full_name'}}</label>
                <input class="form-input" type="text" id="contact_fullname" name="contact_fullname" value="{{customer.name}}">
            </div>
        {{/if}}

        {{#if forms.contact.phone}}
            <div class="form-field">
                <label class="form-label" for="contact_phone">{{lang 'forms.contact_us.phone'}}</label>
                <input class="form-input" type="text" id="contact_phone" name="contact_phone" value="{{customer.phone}}">
            </div>
        {{/if}}

        <div class="form-field">
            <label class="form-label" for="contact_email">{{lang 'forms.contact_us.email'}}
                <small>{{lang 'common.required' }}</small>
            </label>
            <input class="form-input" type="text" id="contact_email" name="contact_email" value="{{customer.email}}">
        </div>

        {{#if forms.contact.order}}
            <div class="form-field">
                <label class="form-label" for="contact_orderno">{{lang 'forms.contact_us.order'}}</label>
                <input class="form-input" type="text" id="contact_orderno" name="contact_orderno">
            </div>
        {{/if}}

        {{#if forms.contact.company}}
            <div class="form-field">
                <label class="form-label" for="contact_companyname">{{lang 'forms.contact_us.company'}}</label>
                <input class="form-input" type="text" id="contact_companyname" name="contact_companyname">
            </div>
        {{/if}}

        {{#if forms.contact.rma}}
            <div class="form-field">
                <label class="form-label" for="contact_rma">{{lang 'forms.contact_us.rma'}}</label>
                <input class="form-input" type="text" id="contact_rma" name="contact_rma">
            </div>
        {{/if}}
    </div>

    <div class="form-field">
        <label class="form-label" for="contact_question">{{lang 'forms.contact_us.question'}}
            <small>{{lang 'common.required' }}</small>
        </label>
        <textarea name="contact_question" id="contact_question" rows="5" cols="50" class="form-input"></textarea>
    </div>
    {{#if forms.contact.manualcaptcha}}
        <div class="form-field">
            <label class="form-label" for="{{forms.contact.manualcaptcha.name}}">
                {{lang 'forms.contact_us.manual_captcha_instruction'}}
                <small>{{lang 'common.required' }}</small>
            </label>
            <div class="manual-captcha-input-container">
                <span class="question">{{forms.contact.manualcaptcha.question}}</span>
                <input class="form-input" type="text" id="{{forms.contact.manualcaptcha.name}}" name="{{forms.contact.manualcaptcha.name}}" value="" aria-disabled="true" autocomplete="off" required>
            </div>
        </div>
    {{/if}}
    {{{forms.contact.recaptcha.markup}}}
    <div class="form-actions">
        <input class="button button--primary" type="submit" value="{{lang 'forms.contact_us.submit' }}">
    </div>
</form>
