{% extends "base.html" %}
{% block title %}Change Password{% endblock %}

{% block content %}
<div class="row justify-content-center mt-4">
  <div class="col-12 col-sm-10 col-md-7 col-lg-5 col-xl-4">

    <nav aria-label="breadcrumb" class="mb-3">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ url_for('quarantine.list_view') }}">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Change Password</li>
      </ol>
    </nav>

    <div class="card shadow-sm border-0 rounded-3">
      <div class="card-header bg-white border-bottom py-3">
        <h5 class="mb-0 fw-semibold">
          <i class="bi bi-key-fill text-warning me-2"></i>Change Password
        </h5>
      </div>
      <div class="card-body p-4">
        <form method="POST" action="{{ url_for('auth.change_password') }}" novalidate autocomplete="off">
          {{ form.hidden_tag() if form.hidden_tag is defined }}

          {% if skip_current %}
          <div class="alert alert-info py-2 small mb-3">
            <i class="bi bi-info-circle me-1"></i>
            You're setting your password for the first time. Choose a new password below.
          </div>
          {% else %}
          <!-- Current Password -->
          <div class="mb-3">
            <label for="current_password" class="form-label fw-semibold">Current Password</label>
            <div class="input-group">
              <span class="input-group-text bg-light">
                <i class="bi bi-lock text-secondary"></i>
              </span>
              <input
                type="password"
                class="form-control {% if form and form.current_password and form.current_password.errors %}is-invalid{% endif %}"
                id="current_password"
                name="current_password"
                placeholder="Your current password"
                autocomplete="current-password"
                required
              >
              {% if form and form.current_password and form.current_password.errors %}
                <div class="invalid-feedback">
                  {% for error in form.current_password.errors %}{{ error }}{% endfor %}
                </div>
              {% endif %}
            </div>
          </div>
          {% endif %}

          <!-- New Password -->
          <div class="mb-3">
            <label for="new_password" class="form-label fw-semibold">New Password</label>
            <div class="input-group">
              <span class="input-group-text bg-light">
                <i class="bi bi-lock-fill text-secondary"></i>
              </span>
              <input
                type="password"
                class="form-control {% if form and form.new_password and form.new_password.errors %}is-invalid{% endif %}"
                id="new_password"
                name="new_password"
                placeholder="Choose a new password"
                autocomplete="new-password"
                required
              >
              <button class="btn btn-outline-secondary" type="button" id="toggleNew" tabindex="-1" title="Show/hide">
                <i class="bi bi-eye" id="toggleNewIcon"></i>
              </button>
              {% if form and form.new_password and form.new_password.errors %}
                <div class="invalid-feedback">
                  {% for error in form.new_password.errors %}{{ error }}{% endfor %}
                </div>
              {% endif %}
            </div>
            <div class="form-text text-muted">Minimum 8 characters recommended.</div>
          </div>

          <!-- Confirm New Password -->
          <div class="mb-4">
            <label for="confirm_password" class="form-label fw-semibold">Confirm New Password</label>
            <div class="input-group">
              <span class="input-group-text bg-light">
                <i class="bi bi-lock-fill text-secondary"></i>
              </span>
              <input
                type="password"
                class="form-control {% if form and form.confirm_password and form.confirm_password.errors %}is-invalid{% endif %}"
                id="confirm_password"
                name="confirm_password"
                placeholder="Re-enter new password"
                autocomplete="new-password"
                required
              >
              {% if form and form.confirm_password and form.confirm_password.errors %}
                <div class="invalid-feedback">
                  {% for error in form.confirm_password.errors %}{{ error }}{% endfor %}
                </div>
              {% endif %}
            </div>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary fw-semibold">
              <i class="bi bi-check-lg me-1"></i>Update Password
            </button>
            <a href="{{ url_for('quarantine.list_view') }}" class="btn btn-outline-secondary">
              Cancel
            </a>
          </div>
        </form>
      </div>
    </div>

  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  const toggleNew     = document.getElementById('toggleNew');
  const newPwdInput   = document.getElementById('new_password');
  const toggleNewIcon = document.getElementById('toggleNewIcon');
  if (toggleNew) {
    toggleNew.addEventListener('click', () => {
      const isText = newPwdInput.type === 'text';
      newPwdInput.type = isText ? 'password' : 'text';
      toggleNewIcon.className = isText ? 'bi bi-eye' : 'bi bi-eye-slash';
    });
  }
</script>
{% endblock %}