{% extends "base.html" %}
{% block title %}Portal Users{% endblock %}
{% block style %}
  form.add { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
             gap: 10px; align-items: end; }
  form.add label { font-weight: 600; font-size: 13px; }
  form.add input, form.add select { display: block; width: 100%; margin-top: 4px; }
  table.plain { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.plain th, table.plain td { text-align: left; padding: 8px;
                                   border-bottom: 1px solid var(--line);
                                   vertical-align: middle; }
  table.plain th { color: #3b4757; font-size: 12px; text-transform: uppercase;
                   letter-spacing: .4px; background: var(--head); }
  td form { display: inline-flex; gap: 6px; margin: 0 8px 0 0; }
  td form input { width: 150px; padding: 4px 8px; }
  td form select, td form button { padding: 4px 8px; }
  .tag { display: inline-block; padding: 1px 8px; border-radius: 10px;
         font-size: 12px; font-weight: 600; background: var(--head); }
  .tag.off { background: var(--fail-bg); color: var(--fail); }
  .tag.lock, .tag.change { background: var(--review-bg); color: var(--review); }
  .tag.on { background: var(--pass-bg); color: var(--pass); }
  @media (max-width: 760px) { form.add { grid-template-columns: 1fr; } }
{% endblock %}
{% block content %}
<h1>Portal Users</h1>
<p class="sub">Admin: everything, and this page. Operator: see everything,
  Start / Stop a Run. Viewer: see only. Users are disabled, never deleted.</p>
{% if error %}<div class="msg bad" role="alert">{{ error }}</div>{% endif %}
{% if message %}<div class="msg good">{{ message }}</div>{% endif %}

<div class="card">
  <h2>Add a user</h2>
  <form class="add" method="post" action="/admin/users" autocomplete="off">
    <input type="hidden" name="token" value="{{ run_token }}">
    <label>Username <input name="username" required></label>
    <label>Name <input name="display_name"></label>
    <label>Role
      <select name="role">{% for r in roles %}<option{% if r == "Viewer" %} selected{% endif %}>{{ r }}</option>{% endfor %}</select>
    </label>
    <label>First password <input name="password" type="password" autocomplete="new-password" minlength="10" required></label>
    <button type="submit">Add</button>
  </form>
  <p class="note">They change the first password at their first Sign-in.</p>
</div>

<div class="card">
  <table class="plain">
    <thead><tr><th>User</th><th>Role</th><th>Status</th><th>Added</th><th>Change</th></tr></thead>
    <tbody>
    {% for u in users %}
    <tr>
      <td><b>{{ u.username }}</b><br><span class="note">{{ u.display_name }}</span></td>
      <td>{{ u.role }}</td>
      <td>
        {% if u.disabled %}<span class="tag off">Disabled</span>
        {% else %}<span class="tag on">Active</span>{% endif %}
        {% if u.must_change %}<span class="tag change">Must change password</span>{% endif %}
        {% if u.locked_until %}<span class="tag lock">Locked until {{ u.locked_until | usdate }}</span>{% endif %}
      </td>
      <td>{{ u.created_at | usdate }}<br><span class="note">by {{ u.created_by }}</span></td>
      <td>
        <form method="post" action="/admin/users/{{ u.username }}/role">
          <input type="hidden" name="token" value="{{ run_token }}">
          <select name="role">{% for r in roles %}<option{% if r == u.role %} selected{% endif %}>{{ r }}</option>{% endfor %}</select>
          <button type="submit" class="plain">Set role</button>
        </form>
        <form method="post" action="/admin/users/{{ u.username }}/reset" autocomplete="off">
          <input type="hidden" name="token" value="{{ run_token }}">
          <input name="password" type="password" placeholder="New first password" autocomplete="new-password" minlength="10" required>
          <button type="submit" class="plain">Reset</button>
        </form>
        {% if u.disabled %}
        <form method="post" action="/admin/users/{{ u.username }}/enable">
          <input type="hidden" name="token" value="{{ run_token }}">
          <button type="submit" class="plain">Enable</button>
        </form>
        {% elif u.username != user.username %}
        <form method="post" action="/admin/users/{{ u.username }}/disable">
          <input type="hidden" name="token" value="{{ run_token }}">
          <button type="submit" class="plain">Disable</button>
        </form>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}