<form data-request="onSignup" data-request-validate data-request-flash>
    <h3 class="mall-signup__heading">{{ 'offline.mall::frontend.signup.signup' | trans }}</h3>

    <div class="mall-form-control">
        <label for="signup_email">{{ 'offline.mall::frontend.form.email' | trans }}</label>
        <input id="signup_email" type="email" placeholder="email@email.com" name="email">
        <div data-validate-for="email"></div>
    </div>
    <div class="mall-two-fields">
        <div class="mall-form-control">
            <label for="firstname">{{ 'offline.mall::frontend.form.firstname' | trans }}</label>
            <input id="firstname" type="text" name="firstname">
            <div data-validate-for="firstname"></div>
        </div>
        <div class="mall-form-control">
            <label for="lastname">{{ 'offline.mall::frontend.form.lastname' | trans }}</label>
            <input id="lastname" type="text" name="lastname">
            <div data-validate-for="lastname"></div>
        </div>
    </div>

    <div class="mall-signup__guest-option">
        <label class="mall-checkbox">
            <input class="js-mall-toggle-guest-signup"
                   type="checkbox" name="as_guest"
                   value="1">
            <span>
                {{ 'offline.mall::frontend.signup.as_guest' | trans }}
            </span>
        </label>
    </div>

    <div class="mall-signup__password-inputs">
        <div class="mall-two-fields">
            <div class="mall-form-control">
                <label for="signup_password">{{ 'offline.mall::frontend.form.password' | trans }}</label>
                <input id="signup_password" type="password" name="password">
                <div data-validate-for="password"></div>
            </div>
            <div class="mall-form-control">
                <label for="password_repeat">{{ 'offline.mall::frontend.form.password_repeat' | trans }}</label>
                <input id="password_repeat" type="password" name="password_repeat">
                <div data-validate-for="password_repeat"></div>
            </div>
        </div>
    </div>

    <div class="mall-signup__billing-address">
        <h3 class="mall-signup__subheading">
            {{ 'offline.mall::frontend.address' | trans }}
        </h3>

        {% partial __SELF__ ~ '::addressform' type='billing' %}

        <div class="mall-signup__shipping-address-option">
            <label class="mall-checkbox">
                <input class="js-mall-toggle-shipping-address"
                       type="checkbox"
                       name="use_different_shipping" value="1">
                <span>
                    {{ 'offline.mall::frontend.signup.different_address' | trans }}
                </span>
            </label>
        </div>
    </div>

    <div class="mall-shipping-address" style="display: none">
        <h3 class="mall-signup__subheading">
            {{ 'offline.mall::frontend.shipping_address' | trans }}
        </h3>
        {% partial __SELF__ ~ '::addressform' type='shipping' %}
    </div>

    {% partial __SELF__ ~ '::terms' %}

    <div class="mall-form-actions">
        <button class="mall-btn mall-btn-signup mall-btn--primary mall-btn--full" type="submit">
            {{ 'offline.mall::frontend.proceed_to_checkout' | trans }}
        </button>
    </div>
</form>
