{% extends "base.html" %}
{% block title %}Edit User{% endblock %}
{% block page_title %}Edit User{% endblock %}

{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-6">
    <div class="mb-3"><a href="{{ url_for('admin.users') }}" style="font-size:13px;color:var(--accent3);">← Back to Users</a></div>
    <div class="card">
      <div class="card-header"><i class="bi bi-person-gear me-2"></i>Edit: {{ user.full_name }}</div>
      <div class="card-body">
        <form method="POST">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Full Name</label>
              <input type="text" class="form-control" name="full_name" value="{{ user.full_name }}" required/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Department</label>
              <input type="text" class="form-control" name="department" value="{{ user.department or '' }}"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Phone</label>
              <input type="text" class="form-control" name="phone" value="{{ user.phone or '' }}"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Role</label>
              <select class="form-select" name="role">
                {% for r in roles %}
                <option value="{{ r }}" {% if r == user.role %}selected{% endif %}>{{ r.replace('_',' ').title() }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12">
              <div class="d-flex align-items-center gap-3">
                <label style="display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;">
                  <input type="checkbox" name="is_active" {% if user.is_active %}checked{% endif %}
                         style="accent-color:var(--success);width:16px;height:16px;"/>
                  <span style="font-size:14px;">Account Active</span>
                </label>
              </div>
            </div>
            <div class="col-12"><hr style="border-color:var(--border);"/></div>
            <div class="col-md-6">
              <label class="form-label">New Password <span style="color:var(--muted);font-weight:400;">(optional)</span></label>
              <input type="password" class="form-control" id="new-password" name="new_password" placeholder="Leave blank to keep current"/>
            </div>
            <div class="col-md-6">
              <label class="form-label">Confirm Password</label>
              <input type="password" class="form-control" id="confirm-password" name="confirm_password" placeholder="Repeat new password"/>
            </div>
          </div>
          <div class="d-flex gap-2 mt-4">
            <button type="submit" class="btn btn-primary"><i class="bi bi-check2 me-2"></i>Save</button>
            <a href="{{ url_for('admin.users') }}" class="btn btn-secondary">Cancel</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
document.querySelector('form').addEventListener('submit', function (e) {
  const pw  = document.getElementById('new-password').value;
  const pw2 = document.getElementById('confirm-password').value;
  if (pw !== pw2) {
    e.preventDefault();
    document.getElementById('confirm-password').style.borderColor = 'var(--danger)';
    const msg = document.createElement('div');
    msg.style.cssText = 'font-size:12px;color:var(--danger);margin-top:4px;';
    msg.textContent = 'Passwords do not match.';
    const existing = document.getElementById('pw-match-msg');
    if (existing) existing.remove();
    msg.id = 'pw-match-msg';
    document.getElementById('confirm-password').insertAdjacentElement('afterend', msg);
  }
});
document.getElementById('confirm-password').addEventListener('input', function () {
  this.style.borderColor = '';
  const msg = document.getElementById('pw-match-msg');
  if (msg) msg.remove();
});
</script>
{% endblock %}