{% include 'header.twig' %}
<main id="notLogin">
    <div id="resetPassword" class="mt-5">
  <div class="container mt-5">
    <div class="row">
        <div class="col-md-6 col-sm-12">
          <div class="highlight-lside">
            <div class="hlight-box">
               <div class="row align-items-center">
                  <div class="col-md-3">
                     <i class="fal fa-phone-laptop icon"></i>
                  </div>
                  <div class="col-md-9">
                     <div>
                        <h4 class="hlight-first">Device Compatibility</h4>
                        <p class="hlight-second">Our site is fully compatible with all desktop and mobile devices you are using.</p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="hlight-box">
               <div class="row align-items-center">
                  <div class="col-md-3">
                     <i class="fal fa-credit-card icon"></i>
                  </div>
                  <div class="col-md-9">
                     <div>
                        <h4 class="hlight-first">Secure Payment</h4>
                        <p class="hlight-second">Thanks to the secure payment activation on our site, you can pay by credit card or money order.</p>
                     </div>
                  </div>
               </div>
            </div>
            <div class="hlight-box">
               <div class="row align-items-center">
                  <div class="col-md-3">
                     <i class="fal fa-smile icon"></i>
                  </div>
                  <div class="col-md-9">
                     <div>
                        <h4 class="hlight-first">Quality Service</h4>
                        <p class="hlight-second">We are always working to increase the satisfaction rate by providing cheap and quality services.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="reset_Card">
                <div class="card card_v2">
                    <div class="card-body p-4">
                      <div id="def_side_title" class="mb-5">
                          <div class="icon">
                            <i class="fas fa-lock"></i>
                          </div>
                          <div class="name">
                            Set New Password
                          </div>
                      </div>
                      {% if errorText %}
        <div class="alert alert-dismissible alert-danger">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ errorText }}
        </div>
      {% endif %}
      {% if successText %}
        <div class="alert alert-dismissible alert-success">
          <button type="button" class="close" data-dismiss="alert">×</button>
          {{ successText }}
        </div>
      {% endif %}
                      <form method="post" action="">
                        <div class="form-group">
                          <label for="username" class="control-label">
                            <span class="icon">
                                <i class="fas fa-envelope"></i>
                              </span> 
                              <span class="name">
                                Username
                              </span>
                             </label>
                          <input type="text" class="form-control" id="username" value="{{ user['username'] }}" placeholder="{{ user['username'] }}" readonly>
                        </div>
                        <div class="form-group">
                          <label for="password_new" class="control-label">
                            <span class="icon">
                                <i class="fas fa-envelope"></i>
                              </span> 
                              <span class="name">
                                New password
                              </span>
                              </label>
                          <input type="password" class="form-control" id="password_new" name="password" placeholder="New Password" required>
                        </div>
                        <div class="form-group">
                          <label for="password_confirm" class="control-label">
                            <span class="icon">
                                <i class="fas fa-envelope"></i>
                              </span> 
                              <span class="name">
                                Confirm new password
                              </span>  
                           </label>
                          <input type="password" class="form-control" id="password_confirm" name="password_again" placeholder="Password" required>
                        </div>
                        <button type="submit" class="btn btn-primary d-block w-100">Submit</button>
                      </form>
                       
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>


  <script src="https://www.google.com/recaptcha/api.js?hl=en"></script>

  </main>
{% include 'footer.twig' %}