{% extends "base.html" %}
{% block title %}Users — Website Checker{% endblock %}
{% block content %}
<div class="page-header">
  <h1 class="page-title">User Management</h1>
  <button class="btn btn-primary" onclick="openModal('modal-create-user')">＋ Add User</button>
</div>

<div class="card">
  <table class="table table-hover">
    <thead>
      <tr>
        <th>ID</th><th>Username</th><th>Full Name</th><th>Email</th>
        <th>Role</th><th>Active</th><th>Created</th><th>Actions</th>
      </tr>
    </thead>
    <tbody>
      {% for u in users %}
      <tr>
        <td>{{ u.id }}</td>
        <td><strong>{{ u.username }}</strong></td>
        <td>{{ u.full_name or '—' }}</td>
        <td>{{ u.email or '—' }}</td>
        <td><span class="badge badge-{{ 'accent' if u.role == 'admin' else 'neutral' }}">{{ u.role }}</span></td>
        <td><span class="badge badge-{{ 'success' if u.is_active else 'danger' }}">{{ 'Yes' if u.is_active else 'No' }}</span></td>
        <td class="text-muted">{{ u.created_at.strftime('%Y-%m-%d') if u.created_at else '—' }}</td>
        <td class="actions">
          <button class="btn btn-ghost btn-sm"
            onclick='openEditUser({{ u|tojson }})'>✎ Edit</button>
          <form method="post" action="{{ url_for('admin_users.delete', user_id=u.id) }}"
                style="display:inline"
                onsubmit="return confirm('Delete user {{ u.username }}?')">
            <button class="btn btn-danger btn-sm" type="submit">✕</button>
          </form>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="8" class="text-center text-muted">No users found.</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<!-- Create User Modal -->
<div class="modal-overlay" id="modal-create-user">
  <div class="modal-dialog">
    <div class="modal-header">
      <h3>Add User</h3>
      <button class="modal-close" onclick="closeModal('modal-create-user')">✕</button>
    </div>
    <form method="post" action="{{ url_for('admin_users.create') }}">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Username *</label>
          <input class="form-control" name="username" required>
        </div>
        <div class="form-group">
          <label class="form-label">Full Name</label>
          <input class="form-control" name="full_name">
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input class="form-control" type="email" name="email">
        </div>
        <div class="form-group">
          <label class="form-label">Role</label>
          <select class="form-control" name="role">
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Password *</label>
          <input class="form-control" type="password" name="password" required>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="closeModal('modal-create-user')">Cancel</button>
        <button type="submit" class="btn btn-primary">Create User</button>
      </div>
    </form>
  </div>
</div>

<!-- Edit User Modal -->
<div class="modal-overlay" id="modal-edit-user">
  <div class="modal-dialog">
    <div class="modal-header">
      <h3>Edit User</h3>
      <button class="modal-close" onclick="closeModal('modal-edit-user')">✕</button>
    </div>
    <form method="post" id="edit-user-form">
      <div class="modal-body">
        <div class="form-group">
          <label class="form-label">Username *</label>
          <input class="form-control" name="username" id="edit-username" required>
        </div>
        <div class="form-group">
          <label class="form-label">Full Name</label>
          <input class="form-control" name="full_name" id="edit-full-name">
        </div>
        <div class="form-group">
          <label class="form-label">Email</label>
          <input class="form-control" type="email" name="email" id="edit-email">
        </div>
        <div class="form-group">
          <label class="form-label">Role</label>
          <select class="form-control" name="role" id="edit-role">
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">Active</label>
          <select class="form-control" name="is_active" id="edit-is-active">
            <option value="1">Yes</option>
            <option value="0">No</option>
          </select>
        </div>
        <div class="form-group">
          <label class="form-label">New Password (leave blank to keep current)</label>
          <input class="form-control" type="password" name="password">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-ghost" onclick="closeModal('modal-edit-user')">Cancel</button>
        <button type="submit" class="btn btn-primary">Save Changes</button>
      </div>
    </form>
  </div>
</div>

<script>
function openEditUser(u) {
  document.getElementById('edit-username').value   = u.username;
  document.getElementById('edit-full-name').value  = u.full_name || '';
  document.getElementById('edit-email').value       = u.email || '';
  document.getElementById('edit-role').value        = u.role;
  document.getElementById('edit-is-active').value   = u.is_active ? '1' : '0';
  document.getElementById('edit-user-form').action  =
    '/admin/users/' + u.id + '/edit';
  openModal('modal-edit-user');
}
</script>
{% endblock %}