{% extends "admin/base.html" %}
{% load i18n static jazzmin %}
{% get_jazzmin_settings request as jazzmin_settings %}
{% get_jazzmin_ui_tweaks as jazzmin_ui %}

{% block title %}{% trans "Change password" %} | {{ jazzmin_settings.site_title }}{% endblock %}

{% block bodyclass %}password-change-page{% endblock %}

{% block extrastyle %}
<style>
  .password-change-page .app-content {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 32px;
    padding-bottom: 48px;
  }
  .password-card {
    width: 100%;
    max-width: 480px;
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 16px rgba(0,0,0,.04);
    overflow: hidden;
  }
  .password-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 24px 28px 0;
  }
  .password-card-header .header-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    flex-shrink: 0;
  }
  .password-card-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color, #212529);
  }
  .password-card-header .subtitle {
    font-size: 13px;
    color: var(--bs-secondary-color, #6c757d);
    margin-top: 2px;
  }
  .password-card-body {
    padding: 20px 28px 28px;
  }
  .password-card-body .form-label {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--bs-body-color, #212529);
  }
  .password-card-body .form-control {
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .password-card-body .form-control:focus {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(129,140,248,.2);
  }
  .input-group .form-control {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .input-group .btn-toggle-pw {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-secondary-color, #6c757d);
    padding: 0 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    display: flex;
    align-items: center;
  }
  .input-group .btn-toggle-pw:hover {
    background: #e9ecef;
    color: var(--bs-body-color, #212529);
  }
  .pw-strength {
    height: 4px;
    border-radius: 2px;
    background: #e9ecef;
    margin-top: 8px;
    overflow: hidden;
  }
  .pw-strength-bar {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .25s ease, background .25s ease;
  }
  .pw-strength-text {
    font-size: 12px;
    margin-top: 4px;
    color: var(--bs-secondary-color, #6c757d);
  }
  .errorlist {
    list-style: none;
    padding: 0;
    margin: 4px 0 0;
  }
  .errorlist li {
    font-size: 12px;
    color: var(--bs-danger, #dc3545);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .non-field-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 20px;
    color: var(--bs-danger, #dc3545);
    font-size: 13px;
  }
  .btn-submit {
    width: 100%;
    padding: 10px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 6px;
    border: none;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    cursor: pointer;
    transition: opacity .15s, transform .1s;
    margin-top: 8px;
  }
  .btn-submit:hover { opacity: .9; }
  .btn-submit:active { transform: scale(.98); }
  .form-hint-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 4px;
  }
  .form-hint-row span {
    font-size: 12px;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .form-hint-row .check { color: var(--bs-success, #198754); }
</style>
{% endblock %}

{% block page_content %}
<div class="app-content">
  <div class="password-card">
    <div class="password-card-header">
      <div class="header-icon"><i class="fas fa-shield-halved"></i></div>
      <div>
        <h3>{% trans "Change password" %}</h3>
        <div class="subtitle">{{ request.user }}</div>
      </div>
    </div>
    <div class="password-card-body">
      {% if form.errors %}
        {% if form.non_field_errors %}
          <div class="non-field-errors">
            {% for error in form.non_field_errors %}{{ error }}{% endfor %}
          </div>
        {% endif %}
      {% endif %}

      <form method="post">
        {% csrf_token %}

        <div class="mb-3">
          <label for="id_old_password" class="form-label">{% trans "Old password" %}</label>
          <div class="input-group">
            <input type="password" name="old_password" id="id_old_password" class="form-control" autofocus required autocomplete="current-password">
            <button type="button" class="btn-toggle-pw" onclick="togglePw(this)" aria-label="Toggle">
              <i class="fas fa-eye"></i>
            </button>
          </div>
          {% if form.old_password.errors %}<ul class="errorlist">{% for e in form.old_password.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
        </div>

        <div class="mb-3">
          <label for="id_new_password1" class="form-label">{% trans "New password" %}</label>
          <div class="input-group">
            <input type="password" name="new_password1" id="id_new_password1" class="form-control" required autocomplete="new-password" oninput="checkStrength(this.value)">
            <button type="button" class="btn-toggle-pw" onclick="togglePw(this)" aria-label="Toggle">
              <i class="fas fa-eye"></i>
            </button>
          </div>
          <div class="pw-strength"><div class="pw-strength-bar" id="pwBar"></div></div>
          <div class="pw-strength-text" id="pwText"></div>
          <div class="form-hint-row" id="pwHints">
            <span id="hintLen"><i class="fas fa-circle" style="font-size:6px"></i> &#33267;&#23567;8&#20301;</span>
            <span id="hintUpper"><i class="fas fa-circle" style="font-size:6px"></i> &#21547;&#22823;&#20889;&#23383;&#27597;</span>
            <span id="hintLower"><i class="fas fa-circle" style="font-size:6px"></i> &#21547;&#23567;&#20889;&#23383;&#27597;</span>
            <span id="hintDigit"><i class="fas fa-circle" style="font-size:6px"></i> &#21547;&#25968;&#23383;</span>
          </div>
          {% if form.new_password1.errors %}<ul class="errorlist">{% for e in form.new_password1.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
        </div>

        <div class="mb-3">
          <label for="id_new_password2" class="form-label">{% trans "Password confirmation" %}</label>
          <div class="input-group">
            <input type="password" name="new_password2" id="id_new_password2" class="form-control" required autocomplete="new-password" oninput="checkMatch()">
            <button type="button" class="btn-toggle-pw" onclick="togglePw(this)" aria-label="Toggle">
              <i class="fas fa-eye"></i>
            </button>
          </div>
          <div id="matchHint" style="font-size:12px;margin-top:4px;color:var(--bs-secondary-color,#6c757d)"></div>
          {% if form.new_password2.errors %}<ul class="errorlist">{% for e in form.new_password2.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
        </div>

        <button type="submit" class="btn-submit">{% trans "Change my password" %}</button>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extrajs %}
<script>
function togglePw(btn) {
  var input = btn.parentElement.querySelector("input");
  var icon = btn.querySelector("i");
  if (input.type === "password") {
    input.type = "text";
    icon.classList.replace("fa-eye", "fa-eye-slash");
  } else {
    input.type = "password";
    icon.classList.replace("fa-eye-slash", "fa-eye");
  }
}
function checkStrength(pw) {
  var bar = document.getElementById("pwBar");
  var text = document.getElementById("pwText");
  var score = 0;
  if (pw.length >= 8) score++;
  if (pw.length >= 12) score++;
  if (/[A-Z]/.test(pw)) score++;
  if (/[a-z]/.test(pw)) score++;
  if (/[0-9]/.test(pw)) score++;
  if (/[^A-Za-z0-9]/.test(pw)) score++;
  var pct = pw.length === 0 ? 0 : Math.min(score / 6 * 100, 100);
  bar.style.width = pct + "%";
  var colors = ["#dc3545","#dc3545","#fd7e14","#ffc107","#198754","#198754","#198754"];
  var labels = ["","\u5f31","\u4e00\u822c","\u826f\u597d","\u5f3a","\u5f88\u5f3a","\u5f88\u5f3a"];
  var idx = Math.min(Math.floor(score), colors.length - 1);
  bar.style.background = colors[idx];
  text.textContent = pw.length ? labels[idx] : "";
  text.style.color = colors[idx];
  setHint("hintLen", pw.length >= 8);
  setHint("hintUpper", /[A-Z]/.test(pw));
  setHint("hintLower", /[a-z]/.test(pw));
  setHint("hintDigit", /[0-9]/.test(pw));
  checkMatch();
}
function setHint(id, ok) {
  var el = document.getElementById(id);
  var txt = el.textContent.trim();
  if (ok) {
    el.innerHTML = '<i class="fas fa-check check"></i> ' + txt;
  } else {
    el.innerHTML = '<i class="fas fa-circle" style="font-size:6px"></i> ' + txt;
  }
}
function checkMatch() {
  var hint = document.getElementById("matchHint");
  var pw1 = document.getElementById("id_new_password1").value;
  var pw2 = document.getElementById("id_new_password2").value;
  if (!pw2) { hint.textContent = ""; return; }
  if (pw1 === pw2) {
    hint.innerHTML = '<span style="color:var(--bs-success,#198754)"><i class="fas fa-check-circle"></i> \u5bc6\u7801\u5339\u914d</span>';
  } else {
    hint.innerHTML = '<span style="color:var(--bs-danger,#dc3545)"><i class="fas fa-times-circle"></i> \u5bc6\u7801\u4e0d\u4e00\u81f4</span>';
  }
}
</script>
{% endblock %}