{% extends "base.html" %}
{% block content %}
<section class="hero-panel card">
  <div class="hero-copy">
    <p class="eyebrow">Admin Control Bay</p>
    <h2>Portal User Management</h2>
    <p>Create, review, and manage access roles for the hosted control surface.</p>
  </div>
  <div class="hero-actions">
    <a class="ghost-button" href="{{ url_for('dashboard.index') }}">Back to Dashboard</a>
  </div>
</section>

<section class="admin-grid">
<section class="card">
  <div class="card-head">
    <h2>Create User</h2>
    <p>Add admins, operators, or viewers for the hosted portal.</p>
  </div>
  <form method="post" class="form-grid">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <label>
      <span>Username</span>
      <input type="text" name="username" required>
    </label>
    <label>
      <span>Email</span>
      <input type="email" name="email" required>
    </label>
    <label>
      <span>Password</span>
      <input type="password" name="password" required>
    </label>
    <label>
      <span>Role</span>
      <select name="role">
        <option value="viewer">Viewer</option>
        <option value="operator">Operator</option>
        <option value="admin">Admin</option>
      </select>
    </label>
    <button class="accent-button" type="submit">Create User</button>
  </form>
</section>

<section class="card">
  <div class="card-head">
    <h2>Users</h2>
    <p>Current portal accounts.</p>
  </div>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Username</th>
          <th>Email</th>
          <th>Role</th>
          <th>Active</th>
          <th>Last Login</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>{{ user.role }}</td>
          <td>{{ 'Yes' if user.is_active else 'No' }}</td>
          <td>{{ user.last_login_at or '-' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>
</section>
{% endblock %}