{% extends "base.html" %}{% block content %}
<script>
  let autoRefreshInterval = null;
  const protocol = "{{ protocol }}";
  const host = window.location.host;
  const prefix = "{{ prefix }}";
  const baseurl = protocol + "://" + host + prefix;

  function escapeHtml(s) {
    if (s == null) return '';
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function showNotification(message) {
    var notification = document.createElement("div");
    notification.className = "notification";
    notification.textContent = message;
    document.body.appendChild(notification);
    setTimeout(function () { document.body.removeChild(notification); }, 3000);
  }

  function showErrorNotification(message) {
    var notification = document.createElement("div");
    notification.className = "error-notification";
    notification.textContent = message;
    document.body.appendChild(notification);
    setTimeout(function () { document.body.removeChild(notification); }, 3000);
  }

  function startAutorefresh() {
    clearInterval(autoRefreshInterval);
    autoRefreshInterval = setInterval(function () { if (window.autoRefreshEnabled) updateData(); }, 5000);
  }

  function stopAutorefresh() {
    clearInterval(autoRefreshInterval);
  }

  document.addEventListener("DOMContentLoaded", function () {
    if (window.autoRefreshEnabled) { startAutorefresh(); }
  });

  document.addEventListener("autorefresh-changed", function (e) {
    if (e.detail.enabled) {
      startAutorefresh();
      showNotification("Autorefresh enabled");
    } else {
      stopAutorefresh();
      showNotification("Autorefresh disabled");
    }
  });

  function updateData() {
    fetch(baseurl + "/workers/json")
      .then(function (r) { return r.json(); })
      .then(function (data) { updateTable(data); })
      .catch(function (error) {
        console.error("Error fetching data: ", error);
        showErrorNotification("Error fetching workers data");
      });
  }

  function updateTable(data) {
    var tableBody = document.querySelector("#workers tbody");
    tableBody.innerHTML = "";

    data.forEach(function (worker, index) {
      var safeName = escapeHtml(worker.name);
      var safeCurrentJob = escapeHtml(worker.current_job);
      var currentJobCell;
      if (worker.current_job !== "Idle") {
        currentJobCell = '<a class="text-blue-700 dark:text-blue-400" href="' + baseurl + '/job/' + encodeURIComponent(worker.current_job_id) + '">' + safeCurrentJob + '</a>';
      } else {
        currentJobCell = safeCurrentJob;
      }

      var queuesText = escapeHtml(worker.queues.join(", "));
      tableBody.innerHTML +=
        '<tr class="tr-stripe">' +
        '<td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">' + safeName + '</td>' +
        '<td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">' + currentJobCell + '</td>' +
        '<td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">' + queuesText + '</td>' +
        '<td class="td-cell">' + worker.successful_job_count + '</td>' +
        '<td class="td-cell">' + worker.failed_job_count + '</td>' +
        '</tr>';
    });
  }
</script>

<div class="max-w-[90%] mx-auto mt-6 px-4">
  <table id="workers" class="data-table">
    <thead>
      <tr>
        <th class="th-cell">Name</th>
        <th class="th-cell">Current Job</th>
        <th class="th-cell">Queues</th>
        <th class="th-cell">Successful jobs</th>
        <th class="th-cell">Failed jobs</th>
      </tr>
    </thead>
    <tbody>
      {% for worker in worker_data %}
      <tr class="tr-stripe">
        <td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">{{ worker.name }}</td>
        <td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">
          {% if worker.current_job != 'Idle' %}
          <a class="text-blue-700 dark:text-blue-400" href="{{baseurl}}/job/{{ worker.current_job_id }}">{{ worker.current_job }}</a>
          {% else %}
          {{ worker.current_job }}
          {% endif %}
        </td>
        <td class="td-cell max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">
          {% for queue_name in worker.queues %}{{ queue_name }}{% if not loop.last %}, {% endif %}{% endfor %}
        </td>
        <td class="td-cell">{{ worker.successful_job_count }}</td>
        <td class="td-cell">{{ worker.failed_job_count }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}