{% extends "base.html" %}

{% block title %}sendword — users{% endblock %}

{% block crumbs %}
<div class="wf-crumbs">
  <span aria-current="page">USERS</span>
</div>
{% endblock %}

{% block content %}
<div class="wf-f wf-ai-b wf-gap-4 wf-mb-2">
  <h1 class="wf-pagetitle wf-p-0">Users</h1>
</div>

<div class="wf-panel" style="margin-bottom: 20px;">
  <div class="wf-panel-head"><span class="wf-panel-title">ADD USER</span></div>
  <div class="wf-panel-body">
    <form method="post" action="/admin/users" style="display: flex; gap: 12px; align-items: flex-end;">
      <div class="wf-field" style="flex: 1;">
        <label for="new-email">EMAIL</label>
        <input class="wf-input" type="email" id="new-email" name="email" required>
      </div>
      <div class="wf-field" style="flex: 1;">
        <label for="new-password">PASSWORD</label>
        <input class="wf-input" type="password" id="new-password" name="password" required>
      </div>
      <button type="submit" class="wf-btn primary sm">ADD USER</button>
    </form>
  </div>
</div>

<div class="wf-panel">
  <div class="wf-panel-head"><span class="wf-panel-title">ALL USERS</span></div>
  <table class="wf-table">
    <thead>
      <tr>
        <th>EMAIL</th>
        <th>CREATED</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for user in users %}
      <tr>
        <td class="strong">{{ user.username }}{% if user.is_self %} <span class="wf-tag accent">YOU</span>{% endif %}</td>
        <td><span data-ts="{{ user.created_at }}">{{ user.created_at }}</span></td>
        <td class="num">
          {% if not user.is_self %}
          <form method="post" action="/admin/users/{{ user.id }}/delete" style="display: inline;" onsubmit="return confirm('Delete user {{ user.username }}?');">
            <button type="submit" class="wf-btn sm danger">DELETE</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}