{% extends "base.html" %}

{% block title %}slurm-quota{% endblock %}

{% block body %}
<div class="page-header">
  <h1 class="page-title">slurm-quota</h1>
  {% if auth_required and logged_in_username %}
  <div class="user-session">
    <span class="user-label">Signed in as <strong>{{ logged_in_username }}</strong></span>
    <form method="post" action="{{ url_for('logout') }}" class="logout-form">
      <input type="hidden" name="_csrf" value="{{ csrf_token }}">
      <button type="submit" class="logout-button">Sign out</button>
    </form>
  </div>
  {% endif %}
  <div class="page-header-actions">
    <nav class="admin-nav">
      <a href="{{ url_for('dashboard') }}">Back to dashboard</a>
    </nav>
  </div>
</div>

<div class="dashboard-stats">
{% if users %}
<section class="stats-section">
<h2>Users</h2>
<table class="stats-table roles-table">
  <thead>
    <tr>
      <th class="col-name">Username</th>
      <th>Role</th>
      <th>Accounts</th>
    </tr>
  </thead>
  <tbody>
    {% for entry in users %}
    <tr>
      <td class="col-name">{{ entry.username }}</td>
      <td>
        <div class="role-with-actions">
          <span class="role-name">{{ entry.role }}</span>
          <div class="roles-actions">
          {% if entry.role == "operator" %}
          <button
            type="button"
            class="stat-edit-btn"
            data-action="role-change"
            data-role-action="revoke"
            data-role="operator"
            data-username="{{ entry.username }}"
          >Revoke operator</button>
          {% elif entry.role == "manager" %}
          <button
            type="button"
            class="stat-edit-btn"
            data-action="role-change"
            data-role-action="revoke"
            data-role="manager"
            data-username="{{ entry.username }}"
          >Revoke manager</button>
          {% elif entry.role == "user" %}
          <button
            type="button"
            class="stat-edit-btn"
            data-action="role-change"
            data-role-action="grant"
            data-role="operator"
            data-username="{{ entry.username }}"
          >Grant operator</button>
          <button
            type="button"
            class="stat-edit-btn"
            data-action="role-change"
            data-role-action="grant"
            data-role="manager"
            data-username="{{ entry.username }}"
          >Grant manager</button>
          {% endif %}
          </div>
        </div>
      </td>
      <td>
        {% if entry.role == "manager" %}
        <div class="manager-accounts-cell">
          {% if entry.accounts %}
            <ul class="manager-accounts-list">
              {% for account in entry.accounts %}
              <li>
                {{ account }}
                <form method="post" action="{{ url_for('roles_manager_accounts_post') }}" class="inline-form">
                  <input type="hidden" name="_csrf" value="{{ csrf_token }}">
                  <input type="hidden" name="action" value="remove">
                  <input type="hidden" name="username" value="{{ entry.username }}">
                  <input type="hidden" name="account" value="{{ account }}">
                  <button type="submit" class="stat-edit-btn">Remove</button>
                </form>
              </li>
              {% endfor %}
            </ul>
          {% else %}
            <span class="muted">None</span>
          {% endif %}
          <button
            type="button"
            class="stat-edit-btn"
            data-action="add-manager-account"
            data-username="{{ entry.username }}"
          >Add account</button>
        </div>
        {% else %}
          <span class="muted">—</span>
        {% endif %}
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</section>
{% else %}
<p>No users found.</p>
{% endif %}
</div>

<dialog id="role-change-dialog" class="edit-dialog role-change-dialog">
  <form method="post" action="{{ url_for('roles_post') }}" class="role-change-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="">
    <input type="hidden" name="role" value="">
    <input type="hidden" name="username" value="">
    <h3 id="role-change-dialog-title" class="edit-dialog-title"></h3>
    <p id="role-change-dialog-body" class="edit-dialog-context"></p>
    <div class="edit-dialog-actions">
      <button type="button" data-dialog-close>Cancel</button>
      <button type="submit" id="role-change-dialog-confirm">Confirm</button>
    </div>
  </form>
</dialog>

<dialog id="manager-account-add-dialog" class="edit-dialog">
  <form method="post" action="{{ url_for('roles_manager_accounts_post') }}" class="manager-account-add-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="action" value="add">
    <input type="hidden" name="username" value="">
    <h3 id="manager-account-dialog-title" class="edit-dialog-title">Add account</h3>
    <label class="edit-dialog-field">
      Account
      <input type="text" name="account" placeholder="hpc" required>
    </label>
    <div class="edit-dialog-actions">
      <button type="button" data-dialog-close>Cancel</button>
      <button type="submit">Add</button>
    </div>
  </form>
</dialog>

<script>
  (function () {
    var roleDialog = document.getElementById("role-change-dialog");
    var accountDialog = document.getElementById("manager-account-add-dialog");
    if (!roleDialog && !accountDialog) {
      return;
    }

    var closeDialog = function (dialog) {
      if (dialog && dialog.open) {
        dialog.close();
      }
    };

    document.querySelectorAll("[data-dialog-close]").forEach(function (btn) {
      btn.addEventListener("click", function () {
        closeDialog(btn.closest("dialog"));
      });
    });

    var roleMessages = {
      "grant:operator": {
        title: function (user) { return "Grant operator to " + user; },
        body: "Can view all statistics and manage quotas, consumption, default quotas, and GPU factors.",
        confirm: "Grant operator"
      },
      "revoke:operator": {
        title: function (user) { return "Revoke operator from " + user; },
        body: "Can no longer view all statistics or manage quotas and consumption. Visibility falls back to their user or manager role.",
        confirm: "Revoke operator"
      },
      "grant:manager": {
        title: function (user) { return "Grant manager to " + user; },
        body: "Can view statistics for Slurm accounts you assign, and for users in those accounts, in addition to their own stats. Assign accounts separately after granting.",
        confirm: "Grant manager"
      },
      "revoke:manager": {
        title: function (user) { return "Revoke manager from " + user; },
        body: "Can no longer view statistics for assigned accounts. All account assignments for this user are removed. Visibility falls back to their own consumption stats only.",
        confirm: "Revoke manager"
      }
    };

    if (roleDialog) {
      var roleForm = roleDialog.querySelector(".role-change-form");
      var roleTitle = document.getElementById("role-change-dialog-title");
      var roleBody = document.getElementById("role-change-dialog-body");
      var roleConfirm = document.getElementById("role-change-dialog-confirm");

      document.querySelectorAll('[data-action="role-change"]').forEach(function (btn) {
        btn.addEventListener("click", function () {
          var roleAction = btn.getAttribute("data-role-action");
          var role = btn.getAttribute("data-role");
          var username = btn.getAttribute("data-username");
          var key = roleAction + ":" + role;
          var msg = roleMessages[key];
          if (!msg) {
            return;
          }

          roleForm.querySelector('input[name="action"]').value = roleAction;
          roleForm.querySelector('input[name="role"]').value = role;
          roleForm.querySelector('input[name="username"]').value = username;
          roleTitle.textContent = msg.title(username);
          roleBody.textContent = msg.body;
          roleConfirm.textContent = msg.confirm;
          roleDialog.showModal();
        });
      });
    }

    if (accountDialog) {
      var accountForm = accountDialog.querySelector(".manager-account-add-form");
      var accountTitle = document.getElementById("manager-account-dialog-title");
      var accountInput = accountForm.querySelector('input[name="account"]');

      document.querySelectorAll('[data-action="add-manager-account"]').forEach(function (btn) {
        btn.addEventListener("click", function () {
          var username = btn.getAttribute("data-username");
          accountForm.querySelector('input[name="username"]').value = username;
          accountTitle.textContent = "Add account for " + username;
          accountInput.value = "";
          accountDialog.showModal();
          accountInput.focus();
        });
      });
    }
  })();
</script>
{% endblock %}