{% extends "base.html" %}
{% block content %}
  {% if error %}
    <p role="alert" class="rounded border border-rose-200 bg-rose-50 px-3 py-2 text-rose-800">
      {{ error }}
    </p>
  {% endif %}
  <table class="w-full border-collapse bg-white text-left text-sm shadow-sm">
    <thead class="bg-slate-100 text-xs uppercase tracking-wide text-slate-500">
      <tr>
        <th class="px-2 py-2">Id</th>
        <th class="px-2 py-2">Email</th>
        <th class="px-2 py-2">Name</th>
        <th class="px-2 py-2">Enabled</th>
        <th class="px-2 py-2"></th>
      </tr>
    </thead>
    <tbody id="users">
      {% for user in users %}
        {% include "_row.html" %}
      {% endfor %}
    </tbody>
  </table>

  <h2 class="mt-8 text-lg font-semibold">Add a user</h2>
  <form method="post" action="/pages/users" class="mt-3 space-y-3">
    <p>
      <label for="email" class="block text-sm text-slate-600">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        value="{{ form.email if form else '' }}"
        class="w-full rounded border border-slate-300 px-3 py-2"
      >
    </p>
    <p>
      <label for="display_name" class="block text-sm text-slate-600">Name</label>
      <input
        id="display_name"
        name="display_name"
        value="{{ form.display_name if form else '' }}"
        class="w-full rounded border border-slate-300 px-3 py-2"
      >
    </p>
    <button type="submit" class="rounded bg-slate-800 px-4 py-2 text-sm text-white hover:bg-slate-700">
      Create
    </button>
  </form>
{% endblock %}