{% extends "base.html" %}
{% block title %}Users | Suvra{% endblock %}
{% block content %}
<section class="page-head">
  <h1>User Management</h1>
  <p class="muted">Tenant-scoped admins can invite, activate, role, suspend, and disable access.</p>
</section>

{% if message %}
<p class="flash">
  {% if message == "role_updated" %}Role updated.
  {% elif message == "status_updated" %}Status updated.
  {% else %}{{ message }}{% endif %}
</p>
{% elif error_message %}
<p class="flash">User change failed: {{ error_message }}.</p>
{% endif %}

<div class="subtabs" id="users-tabs">
  <button type="button" class="subtab is-active" data-users-tab="directory">Users ({{ users|length }})</button>
  <button type="button" class="subtab" data-users-tab="roles">Roles</button>
</div>

<div id="users-panel-directory" class="users-panel">
  <section class="panel">
    <div class="panel-head">
      <h2>Directory</h2>
      {% if ui_permissions.users_write and (not license_summary or (not license_summary.read_only and license_summary.usage.active_users_count < license_summary.max_users)) %}
      <a class="btn btn-secondary" href="/dashboard/users/invite">Invite User</a>
      {% elif ui_permissions.users_write %}
      <button type="button" class="btn btn-secondary" disabled title="User limit reached — upgrade your plan to invite more users">Invite User</button>
      {% endif %}
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>Email</th>
          <th>Status</th>
          <th>Role</th>
          <th>Created</th>
          <th>Last Login</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr>
          <td>{{ user.email or user.user_id }}</td>
          <td>{{ user.status or "—" }}</td>
          <td>{{ user.role or "—" }}</td>
          <td data-utc="{{ user.created_at or '' }}">{{ user.created_at or "—" }}</td>
          <td data-utc="{{ user.last_login_at or '' }}">{{ user.last_login_at or "—" }}</td>
          <td>
            {% if ui_permissions.roles_assign %}
            <form method="post" action="/dashboard/users/{{ user.user_id }}/role" class="filter-bar" style="margin-bottom:8px;">
              <input type="hidden" name="csrf" value="1" />
              <input type="hidden" name="tenant_id" value="{{ tenant_id }}" />
              <select name="role_id">
                {% for role in roles %}
                <option value="{{ role.role_id }}" {% if role.role_id == user.role %}selected{% endif %}>{{ role.title }}</option>
                {% endfor %}
              </select>
              <button type="submit" class="btn btn-secondary">Save Role</button>
            </form>
            {% endif %}
            {% if ui_permissions.users_write %}
            <form method="post" action="/dashboard/users/{{ user.user_id }}/status" class="filter-bar" style="margin-bottom:8px;">
              <input type="hidden" name="csrf" value="1" />
              <input type="hidden" name="tenant_id" value="{{ tenant_id }}" />
              <select name="status">
                {% for option in ["invited", "active", "suspended", "disabled"] %}
                <option value="{{ option }}" {% if option == user.status %}selected{% endif %}>{{ option }}</option>
                {% endfor %}
              </select>
              <button type="submit" class="btn btn-secondary">Save Status</button>
            </form>
            <form method="post" action="/dashboard/users/{{ user.user_id }}/resend-invite">
              <input type="hidden" name="csrf" value="1" />
              <button type="submit" class="btn btn-secondary" {% if user.status == "active" %}disabled{% endif %}>Resend Invite</button>
            </form>
            {% endif %}
          </td>
        </tr>
        {% else %}
        <tr><td colspan="6" class="muted">No tenant users yet.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </section>
</div>

<div id="users-panel-roles" class="users-panel" style="display:none">
  <section class="panel">
    <div class="panel-head">
      <h2>Role Definitions</h2>
      <p class="muted">System-defined tenant roles and their granted permissions.</p>
    </div>
    {% for role in role_catalog %}
    <article class="rule-card">
      <div class="rule-card-header">
        <h3>{{ role.title }}</h3>
      </div>
      <div class="rule-card-body">
        <p>{{ role.description }}</p>
        <p>
          {% for permission in role.permissions %}
          <span class="badge">{{ permission }}</span>
          {% endfor %}
        </p>
      </div>
    </article>
    {% endfor %}
  </section>
</div>

<script>
(function () {
  var tabs = document.querySelectorAll('#users-tabs .subtab');
  var panels = document.querySelectorAll('.users-panel');
  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      tabs.forEach(function (t) { t.classList.remove('is-active'); });
      panels.forEach(function (p) { p.style.display = 'none'; });
      tab.classList.add('is-active');
      var panel = document.getElementById('users-panel-' + tab.getAttribute('data-users-tab'));
      if (panel) panel.style.display = 'block';
    });
  });
})();
</script>
{% endblock %}