{% extends "base.html" %}
{% block title %}DB Users{% endblock %}

{% block content %}
<div class="flex items-center justify-between mb-6">
  <div>
    <h1 class="text-2xl font-bold">DB Users</h1>
    <p class="text-base-content/60 text-sm mt-1">PostgreSQL roles for direct database access</p>
  </div>
  <button
    class="btn btn-primary btn-sm"
    hx-get="/dbusers/form"
    hx-target="#dbuser-modal-body"
    hx-swap="innerHTML"
    onclick="document.getElementById('dbuser-modal').showModal()"
  >
    + Create User
  </button>
</div>

<div class="card bg-base-100 shadow-sm">
  <div class="card-body p-0">
    <table class="table table-zebra">
      <thead>
        <tr>
          <th>Username</th>
          <th>Permission</th>
          <th>Description</th>
          <th>Created</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="dbusers-table-body"
        hx-on:db-user-created="htmx.trigger(this, 'refresh')"
        hx-get="/dbusers"
        hx-trigger="dbUserCreated from:body"
        hx-select="#dbusers-table-body"
        hx-swap="outerHTML"
      >
        {% for user in users %}
          {% include "dbuser_row.html" %}
        {% else %}
          <tr><td colspan="6" class="text-center text-base-content/40 py-8">No DB users yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}