<?php /* Template Name: Login Page */
get_header(); ?>
<section class="login-banner">
    <div class="container custom-container">
        <div id="login-form-result" class="toaster-msg"></div>
        <div class="login-inner">
            <div class="left-sec">
                <div class="left-content">
                     <div class="login-title">
                    Welcome to <br> Security<br> <span>Equipment Depot</span>
                </div>
                <div class="login-content">
                    Sign in to securely access your account and manage<br> your equipment
                </div>
                </div>
               
                <div class="rt-img">
                    <img src="<?php echo get_template_directory_uri(); ?>/img/login-women.png" alt="login-women">
                </div>
            </div>
            <div class="rt-sec">
            <div class="login-container">
            <h3 class="login-title">LOGIN</h3>
          
            <form class="login-form" id="loginForm" data-parsley-validate autocomplete="off">
            
            <div class="form-group login-form-wrp">
                <label for="email" class="form-label">Email Address <span class="star">*</span></label>
                <span class="form-icon">
                <img src="<?php echo get_template_directory_uri(); ?>/img/email-img.svg" alt="email" />
                </span>
                <!-- <input class="form-control" type="email" autocomplete="off" value="" name="email" id="email" required data-parsley-type="email" maxlength="50" data-parsley-trigger="change" data-parsley-required-message="Email is required." 
                                        data-parsley-type-message="Enter a valid email address." placeholder="Enter your email address"> -->
                                        <input
                                        class="form-control"
                                        type="email"
                                        name="email"
                                        id="email"
                                        required
                                        maxlength="50"
                                        data-parsley-trigger="change"
                                        data-parsley-required-message="Email is required."
                                        data-parsley-type-message="Enter a valid email address."
                                        placeholder="Enter your email address" >

            </div>

            <div class="form-group">
                <label for="password" class="form-label">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 type="password" id="passwordField" maxlength="50" autocomplete="new-password" data-parsley-maxlength="50" value="" class="form-control" name="password" placeholder="Enter your password" required data-parsley-minlength="8" data-parsley-trigger="change" data-parsley-error-message="Password is required." data-parsley-length-message="Password must be between 8 and 20 characters long." id="passwordField"> -->
                <input
                  type="password"
                  id="passwordField"
                  name="password"
                  class="form-control"
                  required
                  maxlength="20"
                  autocomplete="new-password"
                  data-parsley-trigger="change"
                  data-parsley-minlength="8"
                  data-parsley-maxlength="20"
                  data-parsley-required-message="Password is required."
                  data-parsley-minlength-message="Password must be at least 8 characters."
                  data-parsley-maxlength-message="Password must not exceed 20 characters."
                  placeholder="Enter your password" autocomplete="new-password"> 

               <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>
            <a href="<?= site_url('forgot-password') ?>" class="forgot-password">Forgot password?</a>

            <button id="loginBtn" class="btn btn-login mt-3">Login</button>
            </form>

            <div class="form-footer mt-4">
            Do you have an account? <a href="<?=site_url('signup')?>" class="signup-link">Sign Up</a>
            </div>
        </div>
        </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>