<div class="popup__body position-relative d-none justify-content-end" data-js-popup-name="account" data-popup-right>
    <div class="popup-account py-25 px-20 js-popup-account" data-popup-content>
        <div class="popup-account__login">
            <div class="popup-account__head d-flex align-items-center mb-10">
                <h5 class="m-0 text-capitalize">{{ __('MY ACCOUNT') }}</h5>
                <i class="popup-account__close ml-auto cursor-pointer" data-js-popup-close>
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-164" viewBox="0 0 24 24">
                        <path d="M19.583 4.965a.65.65 0 0 1-.176.449l-6.445 6.426 6.445 6.426c.117.131.176.28.176.449a.65.65 0 0 1-.176.449.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127l-6.426-6.445-6.426 6.445a.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449l6.445-6.426-6.445-6.426a.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176l6.426 6.445 6.426-6.445a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z"/>
                    </svg>
                </i>
            </div>
            <form action="#" method="POST" id="popup_customer_login" class="mb-15" onsubmit="loginAction(event)">
                @csrf

                <div id="PopupCustomerPhoneContainer">
                    <label for="PopupCustomerPhone" class="label-required text-capitalize">{{ __('Phone number') }}</label>
                    <input type="text" name="phone_number" id="PopupCustomerPhone"
                        placeholder="{{ __('Your phone number') }}" spellcheck="false" autocomplete="off"
                        autocapitalize="off">
                </div>

                <div id="PopupCustomerVerificationCodeContainer" class="d-none">
                    <label for="PopupCustomerVerificationCode" class="label-required text-capitalize">{{ __('Verification code') }}</label>
                    <input type="number" name="verification_code" id="PopupCustomerVerificationCode" class=""
                           placeholder="{{ __('Verification code sent to you via sms') }}" spellcheck="false" autocomplete="off"
                           autocapitalize="off">
                </div>
                

                {{-- <div>
                    <label for="PopupCustomerPassword" class="label-required">PASSWORD</label>
                    <input type="password" name="customer[password]" id="PopupCustomerPassword" class=""
                           placeholder="••••••" required="required">
                </div> --}}

                <input type="submit" class="btn btn--full btn--secondary mb-20" value="{{ __('Login') }}">
                <div class="mb-15">
                    <span class="popup-account__return-to-store btn-link text-uppercase" data-js-popup-close>{{ __('RETURN TO STORE') }}</span>
                </div>
                <div class="mb-10">

                    {{-- <a href="login.html" class="btn-link js-button-block-visibility" data-block-link="#recover" data-action="open" data-action-close-popup="account">Forgot Your Password?</a> --}}
                    <script>
                        Loader.require({
                            type: "script",
                            name: "buttons_blocks_visibility"
                        });
                    </script>

                </div>
            </form>
            
            <hr class="my-15"/>
            <div class="popup-account__head d-flex align-items-center mb-10">
                <h5 class="m-0 text-uppercase">{{ __('Sign up') }}</h5>
            </div>
            <div>


                <p class="h6 mb-15">{{ __('Enjoy the benefits of registering') }}:</p>
                <ul class="mb-20">
                    <li class="mb-15">{{ __('Order: view Order History, track and manage purchases and returns') }}</li>
                    {{-- <li class="mb-15">
                        Address Book and Card Wallet: safely store delivery and payment details --}}
                        {{-- for faster checkout --}}
                    {{-- </li> --}}
                    <li class="mb-15">{{ __('Saved for later: wish list your preferred items and track their availability') }}</li>
                </ul>

            </div>
            {{-- <a href="register.html" class="btn btn--full btn--secondary mb-20 js-popup-account-show-sign-up">Sign up now!</a> --}}
        </div>
        <div class="popup-account__sign-up d-none-important">
            <div class="popup-account__head d-flex align-items-center mb-10">
                <h5 class="m-0">SIGN UP</h5>
                <i class="popup-account__close ml-auto cursor-pointer" data-js-popup-close>
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-164"
                         viewBox="0 0 24 24">
                        <path d="M19.583 4.965a.65.65 0 0 1-.176.449l-6.445 6.426 6.445 6.426c.117.131.176.28.176.449a.65.65 0 0 1-.176.449.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127l-6.426-6.445-6.426 6.445a.846.846 0 0 1-.215.127.596.596 0 0 1-.468 0 .846.846 0 0 1-.215-.127.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449l6.445-6.426-6.445-6.426a.65.65 0 0 1-.176-.449c0-.169.059-.318.176-.449a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176l6.426 6.445 6.426-6.445a.652.652 0 0 1 .449-.176c.169 0 .319.059.449.176.117.13.176.28.176.449z"/>
                    </svg>
                </i>
            </div>
            <form method="post" action="/account" id="popup_create_customer" accept-charset="UTF-8"><input
                    type="hidden" name="form_type" value="create_customer"/><input type="hidden" name="utf8"
                                                                                   value="✓"/>

                <div>
                    <label for="PopupCustomerEmail" class="label-required">FIRST NAME</label>
                    <input type="text" name="customer[first_name]" id="PopupFirstName"
                           placeholder="Enter Please Your First Name" required="required">
                </div>
                <div>
                    <label for="PopupCustomerEmail" class="label-required">LAST NAME</label>
                    <input type="text" name="customer[last_name]" id="PopupLastName"
                           placeholder="Enter Please Your Last Name" required="required">
                </div>
                <div>
                    <label for="PopupCustomerEmail" class="label-required">EMAIL</label>
                    <input type="email" name="customer[email]" id="PopupEmail" class=""
                           placeholder="Enter Please Your Email Address" value="" spellcheck="false"
                           autocomplete="off" autocapitalize="off" required="required">
                </div>
                <div>
                    <label for="PopupCustomerPassword" class="label-required">PASSWORD</label>
                    <input type="password" name="customer[password]" id="PopupCreatePassword" class=""
                           placeholder="••••••" required="required">
                </div>
                <input type="submit" class="btn btn--full btn--secondary mb-20" value="Sign up now!">
                <div class="mb-15">
                    <span class="popup-account__return-to-store btn-link"
                          data-js-popup-close>RETURN TO STORE</span>
                </div>
            </form>
        </div>
    </div>
</div>
