{% extends 'base.html' %}
{% block title %}{% if user %}Edit User{% else %}New User{% endif %}{% endblock %}
{% block content %}
<div class="page-header">
  <div class="page-title">
    {% if user %}Edit User: {{ user.username }}{% else %}Add New User{% endif %}
    <small>{% if user %}Update details or reset password{% else %}Create a new team member account{% endif %}</small>
  </div>
  <a href="{{ url_for('admin_users') }}" class="btn btn-outline-secondary btn-sm">← Back</a>
</div>

<div class="card" style="max-width:540px">
  <div class="card-body">
    {% if error %}<div class="alert alert-danger mb-3">{{ error }}</div>{% endif %}
    <form method="post">
      {% if not user %}
      <div class="form-group mb-3">
        <label>Username *</label>
        <input type="text" name="username" required placeholder="e.g. john_doe" pattern="[a-z0-9_]+">
        <span class="form-hint">Lowercase letters, numbers, underscores only</span>
      </div>
      {% endif %}
      <div class="form-group mb-3">
        <label>Full Name *</label>
        <input type="text" name="full_name" required value="{{ user.full_name if user else '' }}" placeholder="Full display name">
      </div>
      <div class="form-group mb-3">
        <label>Role *</label>
        <select name="role">
          {% for code, label in ROLES.items() %}
          <option value="{{ code }}" {% if user and user.role == code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
        <span class="form-hint">Admin: full access · Editor: create/edit · Viewer: read-only</span>
      </div>
      {% if user %}
      <div class="form-group mb-3">
        <label style="display:flex;align-items:center;gap:8px;text-transform:none;font-size:13.5px;font-weight:500">
          <input type="checkbox" name="is_active" {% if user.is_active %}checked{% endif %} style="width:auto">
          Account is active
        </label>
      </div>
      <div style="border-top:1px solid #e2e8f0;padding-top:18px;margin-bottom:14px">
        <div style="font-weight:600;font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px">Reset Password</div>
      </div>
      <div class="form-group mb-4">
        <label>New Password</label>
        <input type="password" name="new_password" placeholder="Leave blank to keep current">
        <span class="form-hint">Minimum 6 characters</span>
      </div>
      {% else %}
      <div class="form-group mb-4">
        <label>Password *</label>
        <input type="password" name="password" required placeholder="Minimum 6 characters">
      </div>
      {% endif %}
      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">{% if user %}Save Changes{% else %}Create User{% endif %}</button>
        <a href="{{ url_for('admin_users') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}