{% extends "base.html" %}
{% from "quota.html" import quota_cell with context %}
{% from "consumption.html" import consumption_cell with context %}

{% 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">
    {% if user_role == "admin" %}
    <nav class="admin-nav">
      <a href="{{ url_for('roles') }}">Manage roles</a>
    </nav>
    {% endif %}
    <div class="refresh-standalone">
    <label class="refresh-enable">
      <input type="checkbox" id="refresh-enabled">
      Enable auto-refresh
    </label>
    <div class="refresh-interval-wrap" id="refresh-interval-wrap" hidden>
      <label class="refresh-interval-label">Interval
        <select id="refresh-interval">
          <option value="30" selected>30 seconds</option>
          <option value="60">1 minute</option>
          <option value="120">2 minutes</option>
          <option value="300">5 minutes</option>
          <option value="600">10 minutes</option>
        </select>
      </label>
    </div>
    </div>
  </div>
</div>

<div class="dashboard-stats">
<form id="filters-form" method="get" class="filters">
  {% if user_role != "user" %}
  <label>Username
    <input type="text" name="username" value="{{ selected_username }}" placeholder="alice">
  </label>
  {% endif %}
  <label>Account
    <input type="text" name="account" value="{{ selected_account }}" placeholder="hpc">
  </label>
  <fieldset class="unit-fieldset">
    <legend>Units</legend>
    <label class="unit-radio">
      <input
        type="radio"
        name="unit"
        value="minutes"
        {% if not display_hours %}checked{% endif %}
      >
      Minutes
    </label>
    <label class="unit-radio">
      <input
        type="radio"
        name="unit"
        value="hours"
        {% if display_hours %}checked{% endif %}
      >
      Hours
    </label>
  </fieldset>
  <button type="submit">Apply</button>
</form>

{% if users %}
<section class="stats-section">
<h2>Users</h2>
<table class="stats-table">
  <thead>
    <tr class="group-row">
      <th rowspan="2" class="col-name">User</th>
      <th colspan="4" class="group-cpu">CPU</th>
      <th colspan="4" class="group-gpu">GPU</th>
      <th rowspan="2" class="group-meta">Last updated</th>
    </tr>
    <tr>
      <th class="num">Consumed</th>
      <th class="num">Prealloc (jobs)</th>
      <th class="num">Quota</th>
      <th>Usage</th>
      <th class="num">Consumed</th>
      <th class="num">Prealloc (jobs)</th>
      <th class="num">Quota</th>
      <th>Usage</th>
    </tr>
  </thead>
  <tbody>
    {% for row in users %}
    <tr>
      <td class="col-name">{{ row.name }}</td>
      <td class="num">{{ consumption_cell("user", row.name, "cpu", row.cpu) }}</td>
      <td class="num">{{ row.cpu.preallocated }} ({{ row.job_count }})</td>
      <td class="num">{{ quota_cell("user", row.name, "cpu", row.cpu) }}</td>
      <td>
        {% set usage = row.cpu %}
        {% include "usage_bar.html" %}
      </td>
      <td class="num">{{ consumption_cell("user", row.name, "gpu", row.gpu) }}</td>
      <td class="num">{{ row.gpu.preallocated }} ({{ row.job_count }})</td>
      <td class="num">{{ quota_cell("user", row.name, "gpu", row.gpu) }}</td>
      <td>
        {% set usage = row.gpu %}
        {% include "usage_bar.html" %}
      </td>
      <td>{{ row.last_updated }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</section>
{% endif %}

{% if accounts %}
<section class="stats-section">
<h2>Accounts</h2>
<table class="stats-table">
  <thead>
    <tr class="group-row">
      <th rowspan="2" class="col-name">Account</th>
      <th colspan="4" class="group-cpu">CPU</th>
      <th colspan="4" class="group-gpu">GPU</th>
      <th rowspan="2" class="group-meta">Last updated</th>
    </tr>
    <tr>
      <th class="num">Consumed</th>
      <th class="num">Prealloc (jobs)</th>
      <th class="num">Quota</th>
      <th>Usage</th>
      <th class="num">Consumed</th>
      <th class="num">Prealloc (jobs)</th>
      <th class="num">Quota</th>
      <th>Usage</th>
    </tr>
  </thead>
  <tbody>
    {% for row in accounts %}
    <tr>
      <td class="col-name">{{ row.name }}</td>
      <td class="num">{{ consumption_cell("account", row.name, "cpu", row.cpu) }}</td>
      <td class="num">{{ row.cpu.preallocated }} ({{ row.job_count }})</td>
      <td class="num">{{ quota_cell("account", row.name, "cpu", row.cpu) }}</td>
      <td>
        {% set usage = row.cpu %}
        {% include "usage_bar.html" %}
      </td>
      <td class="num">{{ consumption_cell("account", row.name, "gpu", row.gpu) }}</td>
      <td class="num">{{ row.gpu.preallocated }} ({{ row.job_count }})</td>
      <td class="num">{{ quota_cell("account", row.name, "gpu", row.gpu) }}</td>
      <td>
        {% set usage = row.gpu %}
        {% include "usage_bar.html" %}
      </td>
      <td>{{ row.last_updated }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
</section>
{% endif %}

{% if not users and not accounts %}
<p>No stats returned by service.</p>
{% endif %}
</div>

{% if user_role in ("admin", "operator") %}
<dialog id="quota-edit-dialog" class="edit-dialog">
  <form method="post" action="{{ url_for('quotas_post') }}" class="quota-edit-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="target" value="">
    <input type="hidden" name="name" value="">
    <input type="hidden" name="resource" value="">
    <h3 id="quota-dialog-title" class="edit-dialog-title">Set quota</h3>
    <label class="quota-unlimited">
      <input type="checkbox" name="unlimited">
      Unlimited (∞)
    </label>
    <label class="edit-dialog-field">
      Quota (minutes)
      <input
        type="number"
        name="quota_minutes"
        class="quota-input"
        placeholder="minutes"
        min="-1"
      >
    </label>
    <label class="edit-dialog-field">
      Reason (optional)
      <input type="text" name="reason" placeholder="Why is this quota being changed?">
    </label>
    <div class="edit-dialog-actions">
      <button type="button" data-dialog-close>Cancel</button>
      <button type="submit">Set</button>
    </div>
  </form>
</dialog>

<dialog id="consumption-edit-dialog" class="edit-dialog">
  <form method="post" action="{{ url_for('consumption_post') }}" class="consumption-edit-form">
    <input type="hidden" name="_csrf" value="{{ csrf_token }}">
    <input type="hidden" name="target" value="">
    <input type="hidden" name="name" value="">
    <input type="hidden" name="resource" value="">
    <h3 id="consumption-dialog-title" class="edit-dialog-title">Adjust consumption</h3>
    <p id="consumption-dialog-current" class="edit-dialog-context"></p>
    <label class="edit-dialog-field">
      Delta (minutes)
      <input
        type="number"
        name="delta_minutes"
        class="consumption-delta-input"
        placeholder="e.g. 30 or -10"
        title="Signed delta in minutes"
        required
      >
    </label>
    <label class="edit-dialog-field">
      Reason (optional)
      <input type="text" name="reason" placeholder="Why is consumption being adjusted?">
    </label>
    <div class="edit-dialog-actions">
      <button type="button" data-dialog-close>Cancel</button>
      <button type="submit">Adjust</button>
    </div>
  </form>
</dialog>
{% endif %}

<script>
  (function () {
    var LS_ENABLED = "slurm-quota-web.autoRefresh.enabled";
    var LS_SECONDS = "slurm-quota-web.autoRefresh.seconds";
    var ALLOWED_SECONDS = ["30", "60", "120", "300", "600"];

    var enabled = document.getElementById("refresh-enabled");
    var interval = document.getElementById("refresh-interval");
    var wrap = document.getElementById("refresh-interval-wrap");
    if (!enabled || !interval || !wrap) {
      return;
    }
    var timerId = null;

    var isAllowedSeconds = function (v) {
      return ALLOWED_SECONDS.indexOf(v) !== -1;
    };

    var normalizeSelectValue = function () {
      if (!isAllowedSeconds(interval.value)) {
        interval.value = "30";
      }
    };

    var persist = function () {
      try {
        window.localStorage.setItem(LS_ENABLED, enabled.checked ? "1" : "0");
        window.localStorage.setItem(LS_SECONDS, interval.value);
      } catch (e) {
        /* ignore (private mode, disabled storage) */
      }
    };

    var syncVisibility = function () {
      var on = enabled.checked;
      wrap.hidden = !on;
      interval.disabled = !on;
    };

    var clearTimer = function () {
      if (timerId !== null) {
        clearInterval(timerId);
        timerId = null;
      }
    };

    var scheduleTimer = function () {
      clearTimer();
      if (!enabled.checked) {
        return;
      }
      normalizeSelectValue();
      var sec = parseInt(interval.value, 10);
      timerId = setInterval(function () {
        window.location.reload();
      }, sec * 1000);
    };

    var loadFromStorage = function () {
      try {
        var en = window.localStorage.getItem(LS_ENABLED);
        if (en === "1") {
          enabled.checked = true;
        }
        var sec = window.localStorage.getItem(LS_SECONDS);
        if (sec && isAllowedSeconds(sec)) {
          interval.value = sec;
        }
      } catch (e) {
        /* ignore */
      }
      syncVisibility();
      scheduleTimer();
    };

    loadFromStorage();

    enabled.addEventListener("change", function () {
      persist();
      syncVisibility();
      scheduleTimer();
    });
    interval.addEventListener("change", function () {
      normalizeSelectValue();
      persist();
      scheduleTimer();
    });
  })();

  (function () {
    var quotaDialog = document.getElementById("quota-edit-dialog");
    var consumptionDialog = document.getElementById("consumption-edit-dialog");
    if (!quotaDialog && !consumptionDialog) {
      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"));
      });
    });

    if (quotaDialog) {
      var quotaForm = quotaDialog.querySelector(".quota-edit-form");
      var quotaTitle = document.getElementById("quota-dialog-title");
      var quotaToggle = quotaForm.querySelector('input[name="unlimited"]');
      var quotaInput = quotaForm.querySelector(".quota-input");

      var syncQuotaInput = function () {
        quotaInput.disabled = quotaToggle.checked;
        if (!quotaToggle.checked) {
          quotaInput.focus();
        }
      };

      quotaToggle.addEventListener("change", syncQuotaInput);

      document.querySelectorAll('.stat-edit-btn[data-edit="quota"]').forEach(function (btn) {
        btn.addEventListener("click", function () {
          var target = btn.getAttribute("data-target");
          var name = btn.getAttribute("data-name");
          var resource = btn.getAttribute("data-resource");
          var quotaMinutes = parseInt(btn.getAttribute("data-quota-minutes"), 10);

          quotaForm.querySelector('input[name="target"]').value = target;
          quotaForm.querySelector('input[name="name"]').value = name;
          quotaForm.querySelector('input[name="resource"]').value = resource;

          var resourceLabel = resource.toUpperCase();
          var targetLabel = target === "user" ? "user" : "account";
          quotaTitle.textContent =
            "Set " + resourceLabel + " quota for " + targetLabel + " " + name;

          var unlimited = quotaMinutes < 0;
          quotaToggle.checked = unlimited;
          quotaInput.value = unlimited ? "" : String(quotaMinutes);
          syncQuotaInput();
          quotaDialog.showModal();
        });
      });
    }

    if (consumptionDialog) {
      var consumptionForm = consumptionDialog.querySelector(".consumption-edit-form");
      var consumptionTitle = document.getElementById("consumption-dialog-title");
      var consumptionCurrent = document.getElementById("consumption-dialog-current");
      var deltaInput = consumptionForm.querySelector(".consumption-delta-input");

      document.querySelectorAll('.stat-edit-btn[data-edit="consumption"]').forEach(function (btn) {
        btn.addEventListener("click", function () {
          var target = btn.getAttribute("data-target");
          var name = btn.getAttribute("data-name");
          var resource = btn.getAttribute("data-resource");
          var consumed = btn.getAttribute("data-consumed");

          consumptionForm.querySelector('input[name="target"]').value = target;
          consumptionForm.querySelector('input[name="name"]').value = name;
          consumptionForm.querySelector('input[name="resource"]').value = resource;

          var resourceLabel = resource.toUpperCase();
          var targetLabel = target === "user" ? "user" : "account";
          consumptionTitle.textContent =
            "Adjust " + resourceLabel + " consumption for " + targetLabel + " " + name;
          consumptionCurrent.textContent = "Current consumed: " + consumed;

          deltaInput.value = "";
          consumptionDialog.showModal();
          deltaInput.focus();
        });
      });
    }
  })();
</script>
{% endblock %}