{% extends "base.html" %}
{% block title %}用户管理 · {{ app_name }}{% endblock %}
{% block content %}
<h2 style="margin:0 0 6px">用户管理</h2>
<p class="muted" style="margin:0 0 14px">仅管理员可创建。普通用户必须绑定唯一交易账户（一人一账户，账户不可自助注册）。</p>
<div class="grid cols-2">
  <div class="card">
    <h3>创建用户</h3>
    <form method="post" action="{{ url_for('users_create') }}">
      <div class="form-row"><label>用户名</label><input name="username" required></div>
      <div class="form-row"><label>初始密码</label><input name="password" type="password" required minlength="6"></div>
      <div class="form-row">
        <label>角色</label>
        <select name="role" id="roleSel">
          <option value="user">普通用户</option>
          <option value="admin">管理员</option>
        </select>
      </div>
      <div class="form-row" id="accountRow">
        <label>绑定交易账户（普通用户必选，且未被占用）</label>
        <select name="account_id">
          <option value="">—</option>
          {% for a in free_accounts %}
          <option value="{{ a.id }}">#{{ a.id }} {{ a.name }}</option>
          {% endfor %}
        </select>
      </div>
      <button class="btn" type="submit">创建</button>
    </form>
  </div>
  <div class="card">
    <h3>已有用户</h3>
    <table>
      <thead><tr><th>用户名</th><th>角色</th><th>账户</th><th>状态</th></tr></thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td>{{ u.username }}</td>
          <td><span class="tag {% if u.role=='admin' %}green{% else %}gray{% endif %}">{{ u.role }}</span></td>
          <td>{{ u.account_name or (u.account_id or '—') }}</td>
          <td>{{ '启用' if u.enabled else '停用' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
  const sel = document.getElementById('roleSel');
  const row = document.getElementById('accountRow');
  function sync(){ row.style.display = sel.value === 'admin' ? 'none' : 'block'; }
  sel.addEventListener('change', sync); sync();
</script>
{% endblock %}