{% set type = 'billing' %}
<div class="modalcontact">
    <form data-request="onSignup" data-request-validate data-request-flash>
        <div class="contactfragments">
            <div class="contactfragment">
                <div>
                    <h2 class="heading40">{{ 'offline.mall::frontend.signup.signup' | trans }}</h2>
                </div>
            </div>
            <div class="contactfragment">
                <div class="mformgrid gr2">
                    <div class="input">
                        <!--                    <label for="firstname">{{ 'offline.mall::frontend.form.firstname' | trans }}</label>-->
                        <input id="firstname" type="text" name="firstname" placeholder="First Name">
                        <!--                        <div data-validate-for="firstname"></div>-->
                        <span class="errormessage" data-validate-for="firstname"></span>
                    </div>
                    <div class="input">
                        <!--                    <label for="lastname">{{ 'offline.mall::frontend.form.lastname' | trans }}</label>-->
                        <input id="lastname" type="text" name="lastname" placeholder="Last Name">
                        <!--                        <div data-validate-for="lastname"></div>-->
                        <span class="errormessage"  data-validate-for="lastname"></span>
                    </div>
                </div>
                <div class="input">
                    <!--                    <label for="signup_email">{{ 'offline.mall::frontend.form.email' | trans }}</label>-->
                    <input id="signup_email" type="email" placeholder="Your Email Address" name="email">
                    <!--                    <div data-validate-for="email"></div>-->
                    <span class="errormessage" data-validate-for="email"></span>
                </div>
                <div class="input">
                    <!--                    <label for="signup_email">{{ 'offline.mall::frontend.form.email' | trans }}</label>-->
                    <input id="signup_phone" type="phone" placeholder="Your Phone Number" name="phone">
                    <!--                    <div data-validate-for="email"> </div>-->
                    <span class="errormessage" data-validate-for="phone"></span>
                </div>
                <div class="input">
                    <!--                    <label for="signup_password">{{ 'offline.mall::frontend.form.password' | trans }}</label>-->
                    <input id="signup_password" type="password" name="password" placeholder="Password">
                    <!--                    <div data-validate-for="password"></div>-->
                    <span class="errormessage" data-validate-for="password"></span>
                </div>
                <div class="input">
                    <!--                    <label for="password_repeat">{{ 'offline.mall::frontend.form.password_repeat' | trans }}</label>-->
                    <input id="password_repeat" type="password" name="password_repeat" placeholder="Confirm Password">
                    <!--                    <div data-validate-for="password_repeat"></div>-->
                    <span class="errormessage" data-validate-for="password_repeat"></span>
                </div>
                <div class="contactfragment">
                    <div>
                        <h2 class="heading40">Address</h2>
                        <input type="hidden" name="use_different_shipping" value="0">
                    </div>
                </div>
                <div class="mformgrid gr2">
                    <div class="input">
                        <!--                    <label for="{{ type }}_company">{{ 'offline.mall::frontend.form.company' | trans }}</label>-->
                        <input id="{{ type }}_company" type="text"
                               placeholder="{{ 'offline.mall::frontend.form.company' | trans }} Name ({{ 'offline.mall::frontend.form.company_placeholder' | trans }})" name="{{ type }}_company" >

                        <!--                        <div data-validate-for="{{ type }}_company"></div>-->
                        <span class="errormessage" data-validate-for="{{ type }}_company"></span>
                    </div>
                    <div class="input">
                        <!--                    <label for="{{ type }}_address_name">{{ 'offline.mall::frontend.form.recipient' | trans }}</label>-->
                        <input id="{{ type }}_address_name" type="text"
                               placeholder="Recipient's Name ({{ 'offline.mall::frontend.form.recipient_placeholder' | trans }})"
                               name="{{ type }}_address_name">
                        <!--                        <div data-validate-for="{{ type }}_address_name"></div>-->
                        <span class="errormessage" data-validate-for="{{ type }}_address_name"></span>
                    </div>
                </div>
                <div class="input">
                    <!--                <label for="{{ type }}_lines">{{ 'offline.mall::frontend.form.address_lines' | trans }}</label>-->
                    <textarea id="{{ type }}_lines" type="text" name="{{ type }}_lines" placeholder="Address Lines"></textarea>
                    <!--                    <div data-validate-for="{{ type }}_lines"></div>-->
                    <span class="errormessage" data-validate-for="{{ type }}_lines"></span>
                </div>
                <div class="mformgrid gr2">
                    <div class="input">
                        <!--                    <label for="{{ type }}_zip">{{ 'offline.mall::frontend.form.zip' | trans }}</label>-->
                        <input id="{{ type }}_zip" name="{{ type }}_zip" type="text" placeholder="{{ 'offline.mall::frontend.form.zip' | trans }}">
                        <!--                        <div data-validate-for="{{ type }}_zip"></div>-->
                        <span class="errormessage" data-validate-for="{{ type }}_zip"></span>
                    </div>
                    <div class="input">
                        <!--                    <label for="{{ type }}_city">{{ 'offline.mall::frontend.form.city' | trans }}</label>-->
                        <input id="{{ type }}_city" name="{{ type }}_city" type="text" placeholder="{{ 'offline.mall::frontend.form.city' | trans }}">
                        <!--                        <div data-validate-for="{{ type }}_city"></div>-->
                        <span class="errormessage" data-validate-for="{{ type }}_city"></span>
                    </div>
                </div>

                <div class="mformgrid gr2" id="countryState_{{ type }}">
                    {% set type = type|default(form_value('type')) %}
                    {% set countryId = form_value(type ~ '_country_id') %}
                    {% set stateId = form_value(type ~ '_state_id') %}

                    {# If only one country is available it can be preselected. #}
                    {% if (__SELF__.countries | length) == 1 %}
                    {% set countryId = (__SELF__.countries | keys)[0] %}
                    {% endif %}

                    {% set id = type ~ '_country_id' %}
                    <div class="input">
                        <!--                    <label for="{{ id }}">{{ 'offline.mall::frontend.form.country' | trans }}</label>-->
                        {{ form_select_country(id, countryId, {
                        id: id,
                        emptyOption: 'Select Country',
                        'data-request': 'onInit',
                        'data-request-data' : ("type: '" ~ type ~ "'"),
                        'data-request-update': {
                        (__SELF__ ~ '::countrystate'): ('#countryState_' ~ type)
                        }
                        }) }}
                        <!--                        <div data-validate-for="{{ id }}"></div>-->
                        <span class="errormessage" data-validate-for="{{ id }}"></span>
                    </div>
                    {% if __SELF__.useState %}
                    {% set id = type ~ '_state_id' %}
                    <div class="input">
                        <!--                    <label for="{{ id }}">{{ 'offline.mall::frontend.form.state' | trans }}</label>-->
                        {{ form_select_state(id, countryId, stateId, {
                        id: id,
                        emptyOption: 'Select State',
                        }) }}
                        <!--                        <div data-validate-for="{{ id }}"></div>-->
                        <span class="errormessage" data-validate-for="{{ id }}"></span>
                    </div>
                    {% endif %}
                </div>
                <div class="mall-signup-terms">
                    <label class="mall-checkbox">
                        <input class="js-mall-toggle-signup-terms"
                               type="checkbox"
                               name="terms_accepted"
                               value="1"
                        >
                        <span>
                {% partial __SELF__ ~ '::termslabel' %}
                <div data-validate-for="terms_accepted"></div>
            </span>
                    </label>
                </div>
                <!--            <a href="javascript:;" class="button buttonprimary">Save Address</a>-->
                <button class="mall-btn mall-btn-signup mall-btn--primary mall-btn--full button buttonprimary" type="submit">
                    {{ 'offline.mall::frontend.proceed_to_checkout' | trans }}
                </button>
                <div class="alterAuth">
                    <p>
                        Have a account already?
                    </p>
                    <a href="{{'signin' | page}}">Sign In</a>
                </div>
            </div>
        </div>
    </form>
</div>