{% extends "layout.html" %}
{% block title %}Members — Abilian CDN{% endblock %}
{% block content %}
<h1>Members</h1>
<p class="subtitle">Who can sign in to {{ organisation.name }}.</p>

{% if invited %}
<div class="notice once">
  <strong>Hand this over.</strong> {{ invited.email }} signs in with this password,
  which is not stored and cannot be shown again.
  <code class="secret">{{ invited.password }}</code>
</div>
{% endif %}
{% if error %}<p class="notice error">{{ error }}</p>{% endif %}

<div class="card">
  <table>
    <thead><tr><th>Person</th><th>Role</th><th>Status</th><th></th></tr></thead>
    <tbody>
      {% for member in members %}
      <tr>
        <td>{{ member.name }}<br><span class="muted">{{ member.email }}</span></td>
        <td class="muted">{{ member.role }}</td>
        <td class="muted">{{ "active" if member.is_active else "disabled" }}</td>
        <td>
          {% if member.id != user.id %}
          <form method="post" action="/_/ui/members/{{ member.id }}/active">
            <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
            <input type="hidden" name="active" value="{{ '0' if member.is_active else '1' }}">
            <button type="submit" {% if member.is_active %}class="danger"{% endif %}>
              {{ "Disable" if member.is_active else "Enable" }}
            </button>
          </form>
          {% else %}<span class="muted">you</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<h2>Invite someone</h2>
<form class="stack" method="post" action="/_/ui/members">
  <input type="hidden" name="_csrf_token" value="{{ csrf_token() }}">
  <label>Email <input type="email" name="email" required></label>
  <label>Name <input type="text" name="name" required></label>
  <label>Role
    <select name="role">
      <option value="member">member — uses zones and tokens</option>
      <option value="owner">owner — also manages people</option>
    </select>
  </label>
  <button class="primary" type="submit">Create account</button>
</form>
{% endblock %}