{{#extend "checkout" pageClass="page_checkout" title="Checkout - Sign in" fullWidth=true}}
{{#content "steps"}}
{{> steps active-step-index="0" }}
{{/content}}
{{#content "main"}}
<div class="w-100 text-center pb-2">
    <h1>
        <a href="#" id="checkout-store-select" class="link-primary" data-toggle="modal" data-target="#modal-select-store" >Test store selector</a>
    </h1>
</div>
<div class="modal modal-box modal-box_full" id="modal-select-store" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-box__container" role="document">
        <div class="modal-box__row justify-content-center">
            <div class="modal-box__columns">
                <div class="modal-content modal-box__content">
                    <div class="modal-header modal-box__header">
                        <div class="justify-content-center">
                            <div class="container">
                                <div class="row">
                                    <div class="col-12">
                                        <h3 class="modal-title modal-box__title">Select Store</h3>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body modal-box__body popup-content">
                        <div class="component container">
                            <div class="row">
                                <div class="col-12">
                                    <p class="email-title"><strong>Please select the store that you are in from the list below.</strong></p>
                                    <form action="#">
                                        {{> form-row row-mod="sort-order-by ml-0" dropdown="true" id="d1" error="Please select a store" placeholder="Please
                                        select"}}
                                    </form>
                                    <div class="popup-actions">
                                        <button class="btn btn-primary confirm-btn">
                                            <span class="btn__text">Ok</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="checkout-sign-in">
    <form class="checkout-sign-in__inner" novalidate>
        <h3 class="checkout-sign-in__header">Secure checkout</h3>
        Welcome to Wickes secure checkout, please enter your details below
        <div class="warning-required">Required fields</div>
        {{> form-row type="email" id="checkout-email" label="Email address" required="true"}}
        <h5>Do you have a password?</h5>
        <div>If you sign in, it will be quicker for you to complete your order</div>
        <div class="checkout-sign-in__checkbox-wrap">
            {{> radiobutton label="No, checkout as guest" name="sign-in-password" id="sign-in-check-1" checked="true"
            value="guest"}}
        </div>
        <div class="checkout-sign-in__checkbox-wrap">
            {{> radiobutton label="Yes, my password is..." name="sign-in-password" id="sign-in-check-password-switch"
            value="logged-in"}}
            <div class="checkout-sign-in__password-wrap" id="checkout-sign-in-password" style="display: none">
                {{> form-row type="password" id="password" label="Password" label-hidden="true" required="true"}}
                <a href="#" id="checkout-sign-in-forgot-link" class="link-secondary" data-toggle="modal"
                   data-target="#modal-request-pass">Forgot your password?</a>
            </div>
        </div>

        <div class="form-row form-row__action">
            <div class="form-row__col-btn">
                <button class="btn btn-primary checkout-sign-in__btn" id="checkout-sign-in-submit">
                    <span class="btn__text">Continue</span>
                </button>
            </div>
        </div>
    </form>
</div>
{{/content}}

{{#content "foot" mode="append"}}
<script defer src="./js/page/checkout-sign-in.js"></script>

{{#extend "modal" id="modal-request-pass" title="Forgotten password" fullWidth=true}}
{{#content "body"}}
{{#extend "request-pass" id="form-forgotten-password-popup" button-text="Request your new password"}}
{{#content "info-top"}}
Please enter the email address for your Wickes account.<br/>
A link to change your password will be emailed to you.
{{/content}}
{{/extend}}
{{/content}}
{{/extend}}

{{/content}}

{{/extend}}