{% extends "base.html" %}

{% block title %}Change Password{% endblock %}

{% block content %}
<section class="page-header card">
  <div>
    <p class="eyebrow">Security</p>
    <h1>Update password</h1>
    <p>Choose a strong password that you haven't used on the platform before.</p>
  </div>
</section>

<section class="card form-card">
  {% if error %}
  <div class="alert alert-error">{{ error }}</div>
  {% endif %}

  {% if message %}
  <div class="alert alert-success">{{ message }}</div>
  {% endif %}

  <form action="/dashboard/change-password" method="post">
    <div class="field-group">
      <label for="current_password">Current password</label>
      <div class="input-with-action">
        <input type="password" id="current_password" name="current_password" required />
        <button class="btn btn-ghost btn-sm" type="button" data-toggle="password" data-target="current_password">Show</button>
      </div>
    </div>

    <div class="form-grid">
      <div class="field-group">
        <label for="new_password">New password</label>
        <div class="input-with-action">
          <input type="password" id="new_password" name="new_password" required />
          <button class="btn btn-ghost btn-sm" type="button" data-toggle="password" data-target="new_password">Show</button>
        </div>
      </div>
      <div class="field-group">
        <label for="confirm_password">Confirm new password</label>
        <div class="input-with-action">
          <input type="password" id="confirm_password" name="confirm_password" required />
          <button class="btn btn-ghost btn-sm" type="button" data-toggle="password" data-target="confirm_password">Show</button>
        </div>
      </div>
    </div>

    <div class="helper-text">
      Use at least 8 characters with a mix of upper/lower case letters, numbers, and symbols.
    </div>

    <div class="button-row" style="margin-top: 16px;">
      <a class="btn btn-ghost" href="/dashboard/leads">Cancel</a>
      <button class="btn btn-primary" type="submit">Change password</button>
    </div>
  </form>
</section>

<script>
  document.querySelectorAll("[data-toggle='password']").forEach((button) => {
    button.addEventListener("click", () => {
      const targetId = button.getAttribute("data-target");
      const field = document.getElementById(targetId);
      if (!field) return;

      field.type = field.type === "password" ? "text" : "password";
      button.textContent = field.type === "password" ? "Show" : "Hide";
    });
  });
</script>
{% endblock %}