<?php /* Template Name: Password Reset Page */
get_header(); ?>
<section class="forgot-password">
    <div class="container custom-container">
        <div class="forgot-inner">
             <div class="left-content">
                     <div class="login-title">
                    Welcome to Security<br> Equipment Depot
                </div>
                <div class="login-content">
                    Need to reset your password? Enter your email below, and we’ll help you get back into your account securely.
                </div>
                <div class="forgot-pass-text">Reset Password</div>
            </div>
            <div class="form-sec">
                 <form class="login-form" id="reset-password-form" data-parsley-validate>
            <input type="hidden" id="reset_key" name="reset_key" value="">
            <input type="hidden" id="user_login" name="user_login" value="">
            <div class="form-group">
                <label class="form-label">New Password <span class="star">*</span></label>
                <span class="form-icon">
                <img src="<?php echo get_template_directory_uri(); ?>/img/lock-icon.svg" alt="password" />
                </span>
                <input class="form-control" type="password"  maxlength="50" id="new_password" name="new_password"  placeholder="Enter your new password"
                    required data-parsley-maxlength="50"
                    data-parsley-required="true" 
                    data-parsley-minlength="8"
                    data-parsley-minlength-message="New password must be at least 8 characters long."
                    data-parsley-trigger="keyup"
                    data-parsley-required-message="New password is required."
                    data-parsley-length-message="Password must be between 8 and 20 characters long."
                    data-parsley-errors-container="#password-error">
                   
                <span class="form-icon eye-icon">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
                </span>
                
                <div id="password-error"></div>
            </div>

            <div class="form-group">
                <label class="form-label">Confirm Password <span class="star">*</span></label>
                <span class="form-icon">
                <img src="<?php echo get_template_directory_uri(); ?>/img/lock-icon.svg" alt="password" />
                </span>
                <input class="form-control" type="password" maxlength="50" id="confirm_password" name="confirm_password"
                placeholder="Confirm your password"
                data-parsley-maxlength="50"
                    required data-parsley-required="true"
                    data-parsley-equalto="#new_password"
                    data-parsley-equalto-message="Passwords do not match."
                    data-parsley-trigger="keyup"
                    data-parsley-required-message="Confirm password is required."
                    data-parsley-length-message="Password must be between 8 and 20 characters long."
                    data-parsley-errors-container="#confirm-password-error">
                    
                <span class="form-icon eye-icon">
                    <img src="<?php echo get_stylesheet_directory_uri(); ?>/img/eye_ico_open.svg" alt="password" class="toggle-password-icon" />
                </span>
                <div id="confirm-password-error"></div>
            </div>
            <!-- <a href="<?= site_url('login') ?>" class="forgot-password">Back to Login</a> -->

            <button type="submit"class="btn btn-login mt-3" id="reset-btn">Reset Password</button>
            </form>
            </div>
        </div>
    </div>
</section>

<footer class="footer footer-login">
  <div class="container custom-container">
    <div class="row footer-col">
      <div class="f-col-left">
        <div class="footer-logo">
          <a href="<?=site_url();?>"><img src="<?php echo get_template_directory_uri(); ?>/img/logo.svg" alt="Logo"></a>
        </div>
       
      </div>

      <div class="f-col-rt">
        <div class="list-items">
            <ul class="list">
            <li>
                <a href="">Terms and Conditions</a>
            </li>
             <li>
                <a href="">Privacy Policy</a>
            </li>
             <li>
                &copy; <script>document.write(new Date().getFullYear());</script> Security Equipment Depot | Built by <a href="https://kornerstonemedia.com" target="_blank"><strong>Kornerstone Media</strong></a>
            </li>
        </ul>
        <div class="follow-sec">
        <span class="follow-txt">Follow Us</span>
         <a href="#"  class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/google-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/youtube1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/insta1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/fb-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/linkedin-1.svg" alt="google"></a>
          <a href="#" class="icon"><img src="<?php echo get_template_directory_uri(); ?>/img/twitter-1.svg" alt="google"></a>
        </div>
        </div>
      
      </div>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>