{% extends "accounts/login.html" %}
{% load static %}
{% block account_title %}
<title>Aquarium | Account - Change Password</title>
{% endblock account_title %} 

{% block accountContent %}    
    <main class="content-wrapper">
      <!-- Left Section: Form -->
      <div class="form-section">
          <div class="form-container">
              <header class="navbar px-0 pb-4 mt-n2 mt-sm-0">
                  <a href="{% url 'site_home' %}" class="navbar-brand pt-0">
                      <img src="{% static 'site_assets/img/home/grocery/logo.png' %}" alt="Logo" style="max-width: 100%; height: auto;">
                  </a>
              </header>
              <h1 class="h2 mt-auto">Change Your Password</h1>
              <p class="pb-2 pb-md-3">Please enter your new password below to reset it. Make sure it is strong and memorable.</p>
    
              <!-- Form -->
              <form class="needs-validation pb-4 mb-3 mb-lg-4" novalidate method="post" action="">
                {% csrf_token %}
                <!-- New Password Input -->
                <div class="position-relative mb-4">
                  <div class="password-toggle">
                      <i class="ci-key position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
                      <input type="password" class="form-control form-control-lg form-icon-start" placeholder="New Password" name="new_password" minlength="8" required="">
                      <div class="invalid-tooltip bg-transparent py-0">Please enter your new password!</div>
                      <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
                        <input type="checkbox" class="btn-check" />
                      </label>
                  </div>
                </div>


                <!-- Confirm Password Input -->
                <div class="position-relative mb-4">
                  <div class="password-toggle">
                      <i class="ci-key position-absolute top-50 start-0 translate-middle-y fs-lg ms-3"></i>
                      <input type="password" name="confirm_password" class="form-control form-control-lg form-icon-start" placeholder="Confirm Password" required>
                      <div class="invalid-tooltip bg-transparent py-0">Please confirm your password!</div>
                      <label class="password-toggle-button fs-lg" aria-label="Show/hide password">
                        <input type="checkbox" class="btn-check" />
                      </label>
                  </div>
                </div>

                <!-- Submit Button -->
                <button type="submit" class="btn btn-lg btn-primary w-100">Change Password</button>
                </form>
    
              <footer class="mt-auto">
                <p class="fs-xs mb-0">
                  © All rights reserved. Made by <span class="animate-underline"><a class="animate-target text-dark-emphasis text-decoration-none" href="https://geegatechnologies.com/" target="_blank" rel="noreferrer">Geega Technologies</a></span>
                </p>
              </footer>
          </div>
      </div>
    </main>
{% endblock accountContent %}